Vue命令（一）

Vue Command Summary

1.v-bind：元素节点的title属性和message保持一致。

<div id="app-1">

    <span v-bind:title="message">

       鼠标悬停几秒来查看绑定的提示信息！

    </span>

</div>

var app1 = new Vue({

    el:"#app-1",

    data: {

       message:new Date().toLocaleString()

    }

})

app1.message = "显示"; //修改message

2.v-if：条件命令

<div id="app-2">

    <p v-if="seen">

       看不见我

    </p>

</div>

var app2 = new Vue({

    el:"#app-2",

    data: {

       seen:true

    }

})

app2.seen = false;

3.v-for：循环命令

<div id="app-3">

    <ol>

       <li v-for = "todo in todos">{{todo.text}}</li>

    </ol>

</div>

var app3 = new Vue({

    el:"#app-3",

    data: {

       todos:[

           {text:"第一个"},

           {text:"第二个"},

           {text:"第三个"},

           {text:"第四个"}

       ]

    }

})

app3.todos = [

    {text:"first"},

    {text:"second"},

    {text:"third"},

    {text:"fourth"}

];

app3.todos.push({text:"fifth"});

4.v-on：绑定事件监听

<div id="app-4">

    <p>{{message}}</p>

    <button v-on:click="reverseMessage()">翻转</button>

</div>

var app4 = new Vue({

    el:"#app-4",

    data:{

       message:"Hello vue.js!",

    },

    methods:{

       reverseMessage() {

           this.message = this.message.split("").reverse().join("");

       }

    }

})