<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
条件渲染默认会复用相同的组件，如果不复用元素，可添加 key 值
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>
v-show
用于切换元素样式属性 display 的 block 和 none
与 v-if 不同的是，元素隐藏时，并没有从DOM中删除，而 v-if 是删除了元素保存在缓存中。
注意 v-show 不支持 <template> 语法
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
区分 v-if 与 v-show 的使用场景：
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗
如果需要频繁切换使用 v-show 较好
如果在运行时条件不大可能改变则使用 v-if 较好
六、列表渲染
v-for='item of items / item in items' 用于迭代对象或数组中的元素
data: { items: [ {message: 'Foo' }, {message: 'Bar' } ] object: { firstName: 'John', lastName: 'Doe', age: 30 } }
基本用法
<ul> <li v-for="item in items"> {{ item.message }} </li> </ul>
添加第二个参数可以获取当前迭代的 key 值
数组迭代
<ul> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
对象迭代
<div v-for="(value, key) in object"> {{ key }} : {{ value }} </div>
循环组件，向组件中传递数据
<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index"> </my-component>
组件有自己的作用域，向组件中传递数据需要使用属性传递
v-for 具有比 v-if 更高的优先级
判断每一个todo项是否可显示
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>
判断是否需要迭代todos
<ul v-if="shouldRenderTodos"> <li v-for="todo in todos"> {{ todo }} </li> </ul>
添加 key 属性
提升重复渲染效率
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div>
数组监测
Vue重写了数组的变异方法，用于监测数组的更新
push() 、pop() 、shift() 、unshift() 、
splice() 、sort() 、reverse()
这些操作会改变原有数组，为变异方法
非变异方法返回新的数组，可以用于替换旧的数组
直接修改数组长度、利用索引修改数组的值，不会被监听到
过滤/排序
使用计算属性对原有数组进行过滤和排序
data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } }
七、事件监听
v-on
v-on 用于监听绑定的事件
<div> <button @click="say('hi')">Say hi</button> <button @click="say('what')">Say what</button> </div> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } })
原生事件对象
使用 $event 传递原生事件对象
<button v-on:click="warn('hello', $event)">Submit</button> methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) event.preventDefault() alert(message) } }
事件修饰符
methods 应该只处理纯粹的数据逻辑，而不是去处理 DOM 事件细节
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture 使用捕获模式
.self 只有当事件作用于本身时才触发
.once 只绑定一次