v-show 切换显示（CSS display）

最后更新：2026-10-22

v-show 按表达式真假切换元素的 display 样式：元素始终保留在 DOM 中，只是隐藏或显示。

📝 语法

<p v-show="isVisible">现在你看到我了</p>

expression	任意真假表达式

返回值：指令，无返回值

修改下面的代码，在预览区实时查看效果：

输出：

点击切换时文本消失/出现，但开发者工具里元素仍在（display: none）。

💡 提示 频繁切换场景用 v-show 更省：只改 CSS，无 DOM 销毁重建开销。

ℹ️ 说明 初始条件为假时元素照样渲染（占位保留），首屏开销更高。

⚠️ 注意 v-show 不支持 v-else：它只是样式切换，不是流程分支。

更多案例即将上线。

Q v-show 和 v-if 怎么选？

A 切换频率高 → v-show（只改 CSS）；条件很少变化、需要惰性渲染 → v-if。

Q 开发者工具里能看到被 v-show 藏起来的元素吗？

A 能，元素始终在 DOM 中，只是 display 为 none。

Q v-show 能用 v-else 吗？

A 不能，v-show 不是分支指令；需要互斥显示用 v-if / v-else。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。