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("");

}

}

})