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

推荐阅读更多精彩内容