Vue 3（4）v-show 的使用详解与案例演示

一、什么是 v-show？

        在 Vue 中，v-show 是一个条件渲染指令，用于控制元素是否显示在页面上。其本质是通过修改 DOM 元素的 CSS display 属性来实现显示或隐藏。

Hello Vue

        如果 isVisible 为 false，则该元素仍然存在于 DOM 中，但其 display: none，不会被展示。

---

二、完整示例：点击按钮切换显示状态

        我们使用 Vue 3 的模块化开发方式（

---

三、核心讲解

1. v-show 的工作原理：

• v-show="web.show" 中的 web.show 是响应式数据。

• 当 web.show 为 true，

  元素可见。

• 当 web.show 为 false，Vue 会自动将该元素的 display 属性设为 none，从视觉上隐藏它，但它仍保留在 HTML 中。

2. 和 v-if 的区别？

特性	v-show	v-if
是否编译元素	编译一次，不管条件真假	条件满足才编译，否则从 DOM 中移除
切换开销	较低，适合频繁切换	较高，适合首次加载后不变的内容
使用场景	需要频繁显示 / 隐藏的元素（如菜单、弹窗）	内容变化不频繁，节省性能消耗

---

四、效果演示

初始状态：

点击按钮后：

博客标题出现，再点击又会消失。

---

五、总结

• v-show 是 Vue 中控制元素可见性的重要工具，底层通过 display 样式控制；

• 适合频繁切换可见状态的场景；

• 对比 v-if，v-show 性能更优但不适合初次条件判断的元素控制；

• 与 ref() 或 reactive() 一起使用，可以快速实现响应式的显示切换功能。