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

最新推荐文章于 2025-07-06 22:36:32 发布

Theodore_1022

最新推荐文章于 2025-07-06 22:36:32 发布

阅读量676

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue3 文章标签： vue.js javascript 前端前端框架 js ecmascript

本文链接：https://blog.csdn.net/Theodore_1022/article/details/148220257

Vue3 专栏收录该内容

6 篇文章

订阅专栏

一、什么是 `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 中移除
切换开销	较低，适合频繁切换	较高，适合首次加载后不变的内容
使用场景	需要频繁显示 / 隐藏的元素（如菜单、弹窗）	内容变化不频繁，节省性能消耗