Vue中v-if和v- show的区别 （vue 11）

如何选择v-if与v-show ：

v-show 的用法与v-if基本一致，只不过是改变元素的CSS属性display。当v-show表达式的值为false时候，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display：none;

v-if 和 v-show 具有类似的功能，不过v-if 才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元素/组件并不会渲染，只有当条件第一次变为真时才开始编译。

v-show将元素隐藏是在dom节点上加style=’display:none’
v-if是直接将元素完全去掉

大概是这个样子：

而 v-show 只是简单地CSS属性切换，无论条件真与否，都会被编译。相比之下，v-if 更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。