1.共同点:都能控制元素的显示和隐藏。
2.不同点:实现本质⽅法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译⼀次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。
3.总结:如果要频繁切换某节点,使⽤v-show(切换开销⽐较⼩,初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。
v-show 使用:
(v-show使用方法有几种,我这写一种)
<div v-show="show">v-show</div>
// true 显示 false 隐藏
data () {
return {
show:false,
}
},
v-if 使用:
<div v-if="show"> v-if </div>
<div v-else> v-else </div>
data () {
return {
show:false,
}
},
本文详细对比了Vue.js框架中v-if与v-show指令的使用场景及性能差异。v-if通过动态添加或删除DOM元素实现显示与隐藏,适用于不频繁切换的场景;而v-show则通过CSS的display属性改变元素的可见性,适合频繁切换的情况。文章还提供了具体的代码示例。

4718

被折叠的 条评论
为什么被折叠?



