4.条件渲染：根据条件进行元素展示
-
v-if：v-if、v-else-if(2.1.0新增)、v-else三大指令必须紧贴使用，否则指令将不被识别。
-
指令举例
<!-- 切换时DOM元素被移除 , v-if、v-else-if和v-for指令紧贴使用--> <div v-if="show === 'a'"> This is A </div> <div v-else-if="show === 'b'"> This is B </div> <div v-else> This is others </div> -
在**<template>**元素上使用v-if渲染分组
<template>元素可以当做不可见的包裹元素，可以从该元素上使用v-if。最终的渲染结果将不包含**<template>**元素。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> -
使用key属性管理可复用元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
这样也不总是符合实际需求，Vue也提供了另一种方式来表达：这两个元素是完全独立的，不需要对它们进行复用。
解决方案：针对元素添加具有唯一值的key属性即可。
<!-- Demo 给元素添加key属性后，确保唯一性，避免数据缓存复用--> <div v-if="show2"> 用户名：<input type="text" key="username" placeholder="username"/> </div> <div v-else> 邮箱名：<input type="text" key="emailname" placeholder="emailname"/> </div>针对上述例子中：show2的值(true/false)进行切换时，输入框将被重新渲染。
-
-
v-show：另一种根据条件展示元素的指令。
-
注意1：带有v-show的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素的CSS属性display。
<!-- 切换时DOM元素中的display：none，经常操作DOM建议使用v-show --> <div v-show="show"> {{message}} </div> -
注意2：v-show不支持 <template> 元素，也不支持v-else。
-
-
v-if 和 v-show 区别
- v-if 是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建。
- v-if 是惰性的，如果在初次渲染时条件为假，则什么也不做。知道条件第一次变为真时，才会开始渲染条件块。
- v-show 无论初始条件是什么，条件块总会渲染，并且只是简单的基于CSS进行切换。
- 一般来说，v-if有更高的切换开销，而v-show有着更高的初始化渲染开销。
- 因此，如果需要频繁的条件块，选择v-show；如果在运行时条件很少改变，推荐使用v-if。
5.列表渲染
-
v-for：根据一组数组的选项列表进行渲染。
-
v-for 指令需要使用item in(of) items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。
-
v-for 指令可操作的数据选项可以是数据、列表、对象。
-
v-for 指令可支持三参数为列表循环索引。
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div>
举个例子：
Html：循环数据属性中的list对象内容，key值为数据的标识符id，尽量少使用index索引作为数据遍历的key值。
<!-- 做列表渲染的时候不建议采用数组index作为key值，可以根据后端数据标识符id作为key值进行列表渲染 -->
<div v-for="(item, index) of list"
:key="item.id">
{{item.content}} --- {{item.id}}
</div>
Js：Vue实例中的data属性，模拟了测试数据JSON格式。
data: {
// 模拟后端数据
list: [
{
id: "001",
content: "Happy"
},{
id: "002",
content: "Every"
},{
id: "003",
content: "Day"
},
],
numbers: [
1, 2, 3, 4, 5
]
},
-
数据更新监测
-
变异方法：Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。
这些方法如下： push() 添加元素 pop() 弹出最后一个元素 shift() 数组第一项删除 unshift() 编辑数组第一项 splice() 截取 sort() 排序 reverse() 取反 -
替换数组：非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。
-
这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
测试替换数组：给定默认数组numbers，要求将该默认数组下的偶数作为新数组返回。
Js：Vue实例data默认数组初始化
data: { // 测试数组 numbers: [ 1, 2, 3, 4, 5 ] },Js：采用计算属性定义evenNumbers数组，使用filter()方法对默认数组进行过滤。
computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number %2 === 0 }) } }Html：v-for遍历计算属性evenNumbers数组，并打印内容。
<div> <li v-for="n of evenNumbers"> {{ n }} </li> </div>
-
-
注意事项：
-
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
-
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
-
当你修改数组的长度时，例如：vm.items.length = newLength
例如： var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的
-
-
第一类问题：以下两种方式都可以实现vm.items[indexOfItem] = newValue的效果，并且同时触发状态更新。
-
全局Set方法，Vue.set()【实例方法：vm.$set()，该方法是全局方法Vue.set()的别名】
// Vue.set 全局方法 Vue.set(vm.items, indexOfItem, newValue) // vm.$set 实例方法 vm.$set(vm.items, indexOfItem, newValue) -
数组变异方法：splice()
// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
-
-
第二类问题：可以采用变异方法：splice()
vm.items.splice(newLength) -
Vue不能检测对象属性的添加或删除。
对于已经创建的Vue实例，Vue不能动态的添加根界别的响应式属性，但是可以通过**Vue.set(object, key, value)**方法向嵌套对象中添加响应式属性。
var vm = new Vue({ data: { userProfile: { name: 'Anika' } } })可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27) //实例set方法也可以 -
在v-for中**<template>**也可以作为不可见的包裹元素，参与数据的渲染。
-
在同一节点上，v-for比v-if的优先级更高，这意味着v-if将分别运行于每个v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用。
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>上述代码值渲染了未完成的TODO数据列表。
-
在2.2.0+版本中，组件使用v-for时，key现在是必须存在的。
-
-