当我们获取后台数据之后,会按照一定的规则加载到前端写好的模板中,并显示在浏览器中,这个过程称为渲染
条件渲染
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指令,用来渲染同级的多个兄弟元素,代码如下: