对于v-if 和 v-show的选择 --Vue.js
引言:对于v-if和v-show都可以控制元素的显隐,但是因为两者控制显隐方式的不同,所以试用的场合还是不同的。一、v-if 控制显隐方式v-if 是惰性的,如果初始渲染的条件为假,那么什么事情都不做,在第一次变为真的时候才开始局部渲染。这就导致当条件为假的时候在条件块里面的子组件不会被渲染,而且时间监听器也不会生效。当条件切换时会有销毁、重建的过程,所以说,v-if才是
·
引言:
对于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>
更多推荐
已为社区贡献2条内容
所有评论(0)