通过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' })
。你会发现列表中多了一栏新内容。