vuejs学习思路2 - 常用指令

<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米店，持续分享中。。。