一、什么是 v-show？
在 Vue 中，v-show 是一个条件渲染指令，用于控制元素是否显示在页面上。其本质是通过修改 DOM 元素的 CSS display 属性来实现显示或隐藏。
<h1 v-show="isVisible">Hello Vue</h1> 如果 isVisible 为 false，则该元素仍然存在于 DOM 中，但其 display: none，不会被展示。
二、完整示例：点击按钮切换显示状态
我们使用 Vue 3 的模块化开发方式（<script type="module">）来演示 v-show 的效果。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>v-show 示例</title>
</head>
<body><div id="app">{{ web.show }}<h1 v-show="web.show">欢迎来到 theodore_1022 的博客 https://blog.csdn.net/Theodore_1022</h1><button @click="turn">切换状态</button></div><script type="module">import { reactive, createApp } from './vue.esm-browser.js'createApp({setup() {const web = reactive({show: true})const turn = () => {web.show = !web.show // 切换 true/false 状态}return {web,turn}}}).mount('#app')</script>
</body>
</html>
三、核心讲解
1. v-show 的工作原理：
-
v-show="web.show"中的web.show是响应式数据。 -
当
web.show为true，<h1>元素可见。 -
当
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()一起使用，可以快速实现响应式的显示切换功能。
