- methods属性
这个名字是固定的，它是一个对象，用于存储各种方法。{{方法名()}}就可以调用相应的方法。
- 例子练习代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>v-on指令练习</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<button type="button" @click="handleClick">点我</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:'软件1721',
picture:'img/lufei01.jpg'
},
methods:{
handleClick:function(){
alert(this.name);
},
}
})
</script>
</body>
</html>
- v-on指令调用(语法糖：v-on:click可以简写为@click)
- 显示/隐藏练习
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>v-on隐藏于显示切换练习</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2 v-if="show">{{name}}</h2>
<button type="button" @click="handleClick">隐藏/显示</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:'软件1721',
show:true
},
methods:{
handleClick:function(){
//取反
// if(this.show===true){
// this.show=false;
// }else{
// this.show=true;
// }
this.show=!this.show;
}
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>v-on关注练习</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<style type="text/css">
.fllowed{
color:#ddd;
}
.link{
cursor:pointer;
}
.cancle-followed{
color:green;
}
</style>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2>{{name}}</h2>
<span class="followed link" v-show="followed" @click="handleFollow">
<i class="icon-ok"></i>已关注
</span>
<span class="cancle-followed link" v-show="followed===false"
@click="handleFollow">
<i class="icon-plus"></i>关注
</span>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:'简书作者',
followed:false
},
methods:{
handleFollow:function(){
this.followed= !this.followed;
}
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>v-on年龄加减练习</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2>{{age}}</h2>
<button type="button" @click="add">加一岁</button>
<button type="button" @click="substrct(5)">减五岁</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
age:30
},
methods:{
add:function(){
this.age +=1;
},
substrct:function(num){
this.age -=num;
if(this.age-num<=0){
alert('减够了！');
}else{
this.age-=num;
}
}
}
})
</script>
</body>
</html>
