vuejs学习思路2 - 常用指令

*如果不明白script的写法，请点击：点我查看vuejs学习思路-最简单的vue应用

vuejs除了v-model的双向绑定，还有一些其他比较实用的指令，这些指令是使用vuejs时常用的一些指令。

1、v-if ：if判断

    
judge是true

正常js流程：先js判断judge是否是真，然后把值写入p标签里。vue省去了大量代码，非常好用。

2、v-show：跟v-if类似，不同的是，v-if判断后，如果为false，则它的绑定标签在页面不显示，而v-show是显示的，只是style变成display:none。

    
judge是true,所以我的style变成display:none

3、v-else：必须跟在v-if/v-show指令之后，不然不起作用；

Age: {{ age }}
Name: {{ name }}

Name: {{ name }}
Sex: {{ sex }}

4、v-for：foreach 数组，类似php中的foreach($todos as $key =>$vo)

    

        {{ vo.text }}
    

todos被定义成数组形式，里面的每条数据都是json数据。v-for='vo in todos' 里的vo in todos 意思就像foreach。只可意会不可言传~~~

5、v-on：绑定一个自定义的js方法（当然也是在vue对象中定义的）

    
{{ message }}
    点我反转

v-on:click="clickAction"意思是click响应绑定定义的vue对象中的methods中的clickAction方法，点击这个按钮就执行这个方法了。this.message = this.message.split('').reverse().join('')意思就是把前面定义的message反转。
绑定的方法写法:

methods:{
        方法名: function(){
            执行的操作
        }
    }

本文为原创文章，转载请注明出处

觉得本文对你有帮助

关注mid米店，持续分享中。。。