一、相同点
都可以动态控制着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元素