v-if与v-show的区别

一、相同点


都可以动态控制着dom元素的显示隐藏

一、区别


v-if: 满足条件是会渲染到html中,不满足条件时是不会渲染到html中的,是通过操纵dom元素来进行切换显示

v-show: 元素始终被渲染到HTML,它只是简单的伪元素设置css的style属性,当不满足条件的元素被设置style=“display:none”的样,是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏

二、性能对比


v-if有更高的切换消耗;
v-show有更高的初始渲染消耗

三、使用场景


v-if适合运营条件不大可能改变的场景下;
例如:只是要么显示要么隐藏之后不会再改变显示隐藏状态的情况,v-if更加的合理,因为如果默认就是隐藏,相当于dom一次都不用创建,如果默认是显示,v-if和v-show效果完全一样。
v-show适合频繁切换;
例如:商品分类选项卡,频繁切换
注意:v-show不支持v-else和template元素

上一篇:十三、列表渲染————温开水的复习笔记


下一篇:学习Vue3 第十二章(认识组件&Vue3生命周期)