Vue 中 v-if 和 v-show 的区别和用法

使用Vue这个前端框架，控制元素显示隐藏最常用就是 v-if 和 v-show 了，今天有人问我，什么时候用 v-if ？什么时候用 v-show？今天把这两个拿到这里对比区分一下，希望可以帮助到你们。

区分这两者的区别，首先得知道这两个的实现原理。直接上代码

<div v-show="vShow" class="div1">v-show控制的元素</div>
<div v-if="vIf" class="div2">v-if控制的元素</div>

data: {
vShow: true, // 控制v-show显示的开关
vIf: true // 控制v-if显示的开关
}

显示效果如下图,两个元素都显示，这没问题。

当开关全部调整为false时

<div v-show="vShow" class="div1">v-show控制的元素</div>
<div v-if="vIf" class="div2">v-if控制的元素</div>

data: {
vShow: false, // 控制v-show显示的开关
vIf: false // 控制v-if显示的开关
}

效果图如下，
div1还在，但是css属性display：false，让他隐藏了；
div2则消失了，彻底从DOM结构中消失了。

看到这儿大家应该就能看明白了。

总结一下

工作原理上

1. v-show 仅仅控制元素的显示方式，通过display属性的none来控制。
2. v-if 会操作文档流，控制这个DOM节点的存在与否。

使用上

1. 当我们需要经常切换某个元素的显示/隐藏时，使用 v-show 会更加节省性能，只是改变css属性，不会操作文档流，不会改变DOM结构。
2. 当某个元素初始化时，需要通过一次判断来控制显示隐藏，后期不会频繁切换，使用 v-if 会更好。