v-if&v-show的区别

v-if和v-show的区别

1.展示形式不同：

v-if
false不加载
true加载创建dom

v-show
false加载了不显示
true 显示

<div style="display:none">
</div>
<div style="display:block">
</div>

注意：display会造成重绘回流

2.使用场景不同：

v-if和v-show都会造成重绘回流但是

元素加载一次时使用 v-if 如漓江书院不同的会员对应不同的等级图标

元素频繁切换时使用 v-show 如弹出层

因为创建和删除节点的性能开销大