控制切换一个元素是否显示也相当简单:
- <div id="app-3">
- <p v-if="seen"> 现在你看到我了 </p>
- </div>
- var app3 = new vue({
- el: '#app-3',
- data: {
- seen: true
- }
- })
现在你看到我了
继续在控制台输入 app3.seen = false, 你会发现之前显示的消息消失了.
这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute, 还可以绑定到 DOM 结构. 此外, Vue 也提供一个强大的过渡效果系统, 可以在 Vue 插入 / 更新 / 移除元素时自动应用过渡效果 https://vuejs.bootCSS.com/guide/transitions.html .
还有其它很多指令, 每个都有特殊的功能. 例如, 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: '学习 JavaScript' },
- { text: '学习 Vue' },
- { text: '整个牛项目' }
- ]
- }
- })
学习 JavaScript
学习 Vue
整个牛项目
在控制台里, 输入 app4.todos.push({ text: '新项目' }), 你会发现列表最后添加了一个新项目.
来源: http://www.bubuko.com/infodetail-3415742.html