VUE模板渲染

条件渲染

v-if、v-else-if和v-else
v-if、v-else-if、v-else这3个指令后面跟的是表达式。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素／组件，如例所示。
我们需要注意多个v-if、v-else-if和v-else之间需要紧挨着，如果在它们之间插入一行新代码，则代码如下：
此时编译浏览器会报错

v-show

实际上同v-if效果等同，当绑定事件的元素符合引号中的条件时，该元素才显示，代码如下：

v-if和v-show的区别

（1）控制显示的方法不同：该方法和v-if区别在于，v-show实际通过修改DOM元素的display属性来实现节点的显示和隐藏，而v-if则通过添加／删除DOM节点来实现。
（2）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做，此时不会去渲染该元素，只有在条件第一次变为真时才开始局部编译；v-show则不管初始条件是什么，都被编译，然后被缓存，而且将DOM元素保留，只是简单地基于CSS进行切换，即v-if条件为true时才会被加载渲染，而为false时不加载。v-show不管为true还是false，都会被加载渲染。
（3）性能消耗：v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。
（4）使用场景：因此，如果需要非常频繁地切换，则使用v-show较好。如果在运行时条件很少改变，只需一次显示或隐藏，则使用v-if较好。

key

Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染

页面中输入信息后单击“切换”按钮，此时文本框里的内容并没有清空。
Vue为我们提供了一种方式来声明“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的key属性，

列表渲染

v-for循环用于数组
v-for指令根据一组数组的选项列表进行渲染。
我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名（为当前遍历的元素提供别名，可以任意起名）
我们定义一个数组类型的数据items，用v-for将li 标签循环渲染
v-for还支持一个可选的第2个参数为当前项的索引，索引从0开始，代码如下：
分隔符in前的语句使用括号，第2项就是items当前项的索引，运行的结果
遍历对象属性时，有两个可选参数，分别是键名和索引，代码如下：
template标签用法
上述例子中，v-if和v-show指令都包含在一个根元素中，那是否有方法可以将指令作用到多个兄弟DOM元素上呢？Vue提供了内置标签template ，可以将多个元素进行渲染，代码如下：

同样，template 标签也支持使用v-for指令，用来渲染同级的多个兄弟元素，代码如下：