<b>*如果不明白script的写法，请点击：点我查看vuejs学习思路-最简单的vue应用</b>
vuejs除了v-model的双向绑定，还有一些其他比较实用的指令，这些指令是使用vuejs时常用的一些指令。
1、v-if ：if判断
<div id="div-3">
<p v-if='judge'>judge是true</p>
</div>
<script>
//app3只是新建vue对象的名字，可以自己随便取，只要一个页面没有重复即可
var app3 = new Vue({
el:'#div-3',
data:{
judge:true
}
})
</script>
正常js流程：先js判断judge是否是真，然后把值写入p标签里。vue省去了大量代码，非常好用。
2、v-show：跟v-if类似，不同的是，v-if判断后，如果为false，则它的绑定标签在页面不显示，而v-show是显示的，只是style变成display:none。
<div id="div-6">
<p v-show='judge'>judge是true,所以我的style变成display:none</p>
</div>
<script>
var app6 = new Vue({
el:'#div-6',
data:{
message:false
}
});
</script>
3、v-else：必须跟在v-if/v-show指令之后，不然不起作用；
<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<hr>
<h1 v-show="name.indexOf('cool') = 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 21,
name: 'keepcool',
sex: 'Male'
}
})
</script>
4、v-for：foreach 数组，类似php中的foreach($todos as $key =>$vo)
<div id="div-4">
<p v-for='vo in todos'>
{{ vo.text }}
</p>
</div>
<script>
var app4= new Vue({
el:'#div-4',
data:{
todos:[
{text:"我是数组数据1"},
{text:"我是数组数据2"}
]
}
});
</script>
todos被定义成数组形式，里面的每条数据都是json数据。v-for='vo in todos' 里的vo in todos 意思就像foreach。只可意会不可言传~~~
5、v-on：绑定一个自定义的js方法（当然也是在vue对象中定义的）
<div id="div-5">
<p>{{ message }}</p>
<button v-on:click="clickAction">点我反转</button>
</div>
<script>
var app5 = new Vue({
el:'#div-5',
data:{
message:"我是超人"
},
methods:{
clickAction: function(){
this.message = this.message.split('').reverse().join('')
}
}
});
</script>
v-on:click="clickAction"意思是click响应绑定定义的vue对象中的methods中的clickAction方法，点击这个按钮就执行这个方法了。this.message = this.message.split('').reverse().join('')意思就是把前面定义的message反转。
绑定的方法写法:
methods:{
方法名: function(){
执行的操作
}
}
<h1>本文为原创文章，转载请注明出处</h1>
<h1>觉得本文对你有帮助</h1>
关注简书mid米店，持续分享中。。。
网友评论