文章出處
文章列表
通過vue控制切換一個元素的顯示也相當簡單：
<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' } ] } })
運行結果如下：
在控制臺里，輸入 app4.todos.push({ text: 'New item' })。你會發現列表中多了一欄新內容。
文章列表
全站熱搜
留言列表
