引言:
对于v-if和v-show都可以控制元素的显隐,但是因为两者控制显隐方式的不同,所以试用的场合还是不同的。
一、v-if 控制显隐方式
v-if 是惰性的,如果初始渲染的条件为假,那么什么事情都不做,在第一次变为真的时候才开始局部渲染。这就导致当条件为假的时候在条件块里面的子组件不会被渲染,而且时间监听器也不会生效。当条件切换时会有销毁、重建的过程,所以说,v-if才是真正的条件渲染

二、v-show控制显隐方式
v-show其实是通过控制节点css属性中的display:none与否来控制是否显示。所以v-show无论条件真假都会进行编译并且保留编译,只是简单基于css切换

总结:
1、根据对比可知,v-if有更高的切换消耗,v-show有更高的初始渲染消耗。因此,如果需要频繁切换就采用v-show,如果运行条件不太可能改变,就采用v-if
2、v-if与v-else搭配,v-show也可以使用取反来模拟例如:

<span v-show = "show">I am v-show</span>
<span v-show = "!show">I am else</span>
Logo

前往低代码交流专区

更多推荐