第 5 课：v-show与显示切换

• 日期：2026-09-04
• 课程序号：第 5 课
• 知识点：display 与节点保留

用途

频繁显示或隐藏一条辅助提示。

核心概念

v-show 保留元素，通过 display 控制显示；v-if 会创建/销毁分支。v-show 不与 v-else 配对。

最小代码或操作示例

<!-- 沿用启用模板编译器的 Vue 入口 -->
<div id="app">
  <button @click="visible = !visible">切换提示</button>
  <p v-show="visible">每次只练习一个知识点</p>
</div>
<script type="module">
import { createApp } from "vue";
createApp({ data: () => ({ visible: true }) }).mount("#app");
</script>

3～5 分钟练习

隐藏提示后在开发者工具 Elements 中找 p；再换成 v-if 对比。

参考答案

v-show 隐藏后 p 仍在 DOM 中，display 为 none；v-if 为 false 时该 p 不存在。

与上一课的联系

上一课学习条件分支，本课比较同样看不见但节点生命周期不同的方式。