浅谈vue中v-if和v-show

v-if和v-show的共同点

在vue中,两者都是用于控制元素是否可见的指令,两者的值为布尔值,值为true,则显示,false则隐藏

 <div v-if="false">
     你好,我是隐藏的
 </div>
 <div v-if="true">
     你好,我是可见的
 </div>
 
 <div v-show="false">
     你好,我是隐藏的
 </div>
 <div v-show="true">
     你好,我是可见的
 </div>

v-if和v-show的区别

1. 原理不同 v-if的可见控制是通过创建和销毁元素实现的, v-show的可见控制是通过添加 display: none 样式实现的
2. 性能不同 v-if会减少初次加载的性能损耗,而更新的性能损耗更高 v-show会增加初次加载的性能损耗,而更新的性能损耗较低
3. 场景不同 v-if一般用于根据初始数据不同而显示不同的情况的场景,例如:默认头像的男/女不同显示 v-show则多用于折叠层/抽屉等需要经常切换显示状态的场景