控制切換一個元素的顯示也相當簡單:
~~~
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
~~~
~~~
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
~~~
繼續在控制臺設置 app3.seen = false,你會發現 “Now you see me” 消失了。
這個例子演示了我們不僅可以綁定 DOM 文本到數據,也可以綁定 DOM 結構到數據。而且,Vue.js 也提供一個強大的過渡效果系統,可以在 Vue 插入/刪除元素時自動應用過渡效果。
也有一些其它指令,每個都有特殊的功能。例如, v-for 指令可以綁定數據到數組來渲染一個列表:
~~~
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
~~~
~~~
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
~~~
1. learn javascript
2. learn vue
3. learn php