【Vue教程四】条件渲染、列表渲染、数组更新
一、条件渲染：【v-if】【v-show】
1、v-if 指令用于条件性地渲染一块内容。
1.1、在元素中使用 v-if 指令：
Hello qing!
A
B
C
Not A/B/C
注：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
不推荐同时使用 v-if 和 v-for。因为当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：
{{ todo }}
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 )上。如：
-
{{ todo }}
No todos left!
1.2、在template 中使用 v-if 指令：
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。
Title
Paragraph 1
Paragraph 2
1.3、用key管理可复用元素：
说明：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因为两个模板使用了相同的元素， 不会被替换掉，仅仅是替换了它的 placeholder。所以此时要添加 key 属性，来表达“这两个元素是完全独立的，不要复用它们”。
2、另一个用于根据条件展示元素的选项是 v-show 指令。
Hello!
注意：v-show 不支持 元素，也不支持 v-else。
3、v-if 与 v-show 比较：
v-if 是“真正”的条件渲染，因为它会根据条件被销毁和重建。而 v-show 始终会被渲染并保留在 DOM 中，它只是简单地切换元素的 CSS 中的 display 属性。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
二、列表渲染
1、渲染数组：可以用 v-for 指令基于一个数组来渲染一个列表。
-
{{ item.message }}
v-for 还支持一个可选的第二个参数，即当前项的索引，从0开始。
{{ index }} - {{ item.message }}
也可以用 of 替代 in 作为分隔符：
2、渲染对象：可以用 v-for 来遍历一个对象的属性。
-
{{ index }}---{{ name }}==={{ value }}
结果如下图所示：
注：第一个参数表示值，第二个的参数为键名，第三个参数为索引。
三、数组更新
1、变异方法：（通俗来说是指可以直接修改原数组的一些方法）
-
{{ value }}
此时界面显示“a b c d”
2、非变异方法：例如 filter()、concat() 和 slice()。它们不会改变原始数组，而总是返回一个新数组。
3、注意事项：由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
A、当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
B、当你修改数组的长度时，例如：vm.items.length = newLength
举例：在上面代码中执行下面方法
vm.items[1] = 'x' // 不是响应性的，数组中的第二个元素'b'并不会改变
vm.items.length = 2 // 不是响应性的，数组的长度依然是3为了解决上述A类问题，可以用下面3种方法：
// vm.items[0] = 'x' // 不是响应性的，此时看数组中的第一个数据没有变化
// 方法1：Vue.set
Vue.set(vm.items, 0, 'x')
//方法2：vm.$set是全局方法Vue.set的别名
vm.$set(vm.items, 0, 'x')
//方法3：使用数组自带的splice方法
vm.items.splice(0, 1, 'x')为了解决上述B类问题，可以使用splice方法：
vm.items.splice(2);//此时数组长度变成2