vue中v-if和v-show
vue中的指令(指特殊的带有前缀v-
的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。):v-if和v-show,二者都是条件渲染:
v-if根据表达式的值true或false在DOM中生成或者移除一个元素(或多个元素),用来控制DOM节点。类似于js中的if条件判断,后面可以跟v-else、v-else-if。如果想切换多个元素时,可以把<template>当为包装元素,并在其上使用v-if,最终的渲染结果不会包含它。
v-show是用来控制DOM节点的display属性,当v-show传入的值为true时,对应display的值为block之类的,当为false时,对应的值为none,不支持<template>。
v-if和v-show都能控制DOM元素的显示和隐藏,但是在切换v-if模块时,Vue有一个局部编译/卸载过程,因为v-if中的模板可能包括数据绑定或者子组件,v-if是真是的条件渲染,它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。
v-if是真正的条件渲染,他会确保条件快在切换时,合适地销毁和重建条件快内的事件监听器和子组件。
v-if是惰性的,如果初始条件为假时什么也不做,在条件第一次为真时才开始编译(编译会被缓存起来)。
相比之下,v-show始终被编译并保留,只是简单地基于CSS切换。
一般来说,v-if有真高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换用v-show;如果运行时条件不大可能改变,用v-if。