Vue常用指令

指令大全

v-if:条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值，语法如下：

<div id="app">
    <h1 v-if="yes">Yes</h1>
    <h1 v-if="no">No</h1>
    <h1 v-if="age > 25">Age: {{age}}</h1>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            yes: true,//值为真，插入元素
            no: false,//值为假，不插入元素
            age: 28
        }
    })
</script>

v-show:条件渲染指令,与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值。

<div id="app">
    <h1 v-show="yes">Yes</h1>
    <h1 v-show="no">No</h1>
    <h1 v-show="age > 25">Age: {{age}}</h1>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            yes: true,//值为真，插入元素
            no: false,//值为假，不插入元素
            age: 28
        }
    })
</script>

v-else:可配合v-if或v-show使用，v-else指令必须紧邻v-if或v-show，否则该命令无法正常工作。v-else绑定的元素能否渲染在HTML中，取决于前面使用的是v-if还是v-show。若前面使用的是v-if，且v-if值为true，则v-else元素不会渲染；若前面使用的是v-show，且v-show值为true，则v-else元素仍会渲染到HTML。

v-for:循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似，语法如下：

在浏览器控制台里Console，输入app.todos.push({text: 'new item'})，则会插入新的一条信息。

v-bind:给Dom绑定元素属性，语法如下:

<div id="app">
    <span v-bind:title="message">hover your mouse</span>
</div>
<script>
var app=new Vue({
     el:'#app',
     data:{
         message:'时间:'+new Date()
     }
})
</script>

v-on:用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click="doSth"。

注：v-on指令可以缩写为@符号。如：@click="doSth"。

<div id="app">
<input type="text" v-module="message"/>
    <br/>
<button v-on:click="first">click</button>
    <br/>
<button @click="two('hello c!')">click</button>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'hello world'
        },
        methods:{
            first:function(){
                alert(this.message)
            },
            two:function(msg){
                alert(msg)
            }
        }
    })
</script>

 

转载于:https://my.oschina.net/u/3453119/blog/1786953