v-show和v-if

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、v-if和v-show是什么？
• 二、
• • 1.共同点
  • 2.不同点
• 三、v-show失效的原因
• 总结

---

前言

在使用vue的过程中出现了v-show失效的情况，来探讨一下为什么？

一、v-if和v-show是什么？

1. v-if是Vue.js的一个指令，用于控制元素的条件渲染。它根据给定的表达式的值来决定是否显示页面上的元素。如果该表达式的值为真，则该元素会被渲染出来，否则就不会被渲染出来。当表达式的值发生变化时，元素会自动重新渲染。

2.v-show是Vue.js中一个用于控制元素显示和隐藏的指令。v-show是通过改变元素的CSS显示属性来控制元素的可见性，当条件为假时，元素仍然存在于DOM中，只是其CSS属性display被设置为none。因此，切换可见性时，v-show对性能的影响较小

二、

1.共同点

 v-if和v-show都是Vue.js中的条件渲染指令，用于根据条件来显示或隐藏元素。

两者都可以根据布尔值类型的表达式进行条件判断。

2.不同点

v-if是惰性的，即当条件为假时，元素及其子元素会从DOM中完全移除；当条件为真时，元素会被重新渲染并添加到DOM中。

v-show是通过改变元素的CSS display属性来控制元素的可见性，当条件为假时，元素会被隐藏，但仍然保留在DOM中。

 v-if在条件为false时，不会渲染任何内容，包括子组件。而v-show在条件为false时，仍然会渲染元素及其子元素，只是通过CSS样式使其不可见。

- v-if支持使用v-else-if和v-else来定义多个条件分支，而v-show不支持。 - 当初始渲染时，如果条件为false，v-show会立即将元素隐藏，而v-if会在条件为真时才开始渲染对应的元素。

三、v-show失效原因

1. 元素的初始状态：v-show是通过CSS的display属性来控制元素的可见性，当元素的初始display属性设置为none时，无论条件如何改变，元素都会始终隐藏。请确保元素的初始属性为block或其他适当的值。

2. 条件表达式：请确保v-show指令的条件表达式正确且满足预期，如果条件表达式返回false值，元素将保持隐藏。可能需要进一步检查条件表达式的逻辑或与所使用的数据进行关联。

3. 父级元素的样式：请检查父级元素的样式是否会影响子元素的可见性。有时候，父级元素的显示属性可能会影响v-show指令的效果。

4. 异步渲染：Vue.js具有异步渲染的特性，可能会导致v-show指令在更新期间的短暂间隙内失效。如果这是问题所在，可以尝试使用Vue.nextTick()方法来确保在DOM更新后再重新评估v-show指令。

---

总结

综上，如果需要频繁切换元素的可见性，且涉及到大量元素节点的渲染和销毁操作，建议使用v-show。而如果需要在条件变化时，动态创建或销毁元素节点，建议使用v-if。