v-if是条件渲染，元素根据表达式真假动态创建或销毁DOM节点；v-show是条件显示，元素始终存在于DOM中，仅通过display样式控制显隐。

v-if 和 v-show 是 Vue 3 中实现条件渲染的两个核心指令，用法直观但原理和适用场景差异明显。选对指令，能避免性能浪费和逻辑异常。

v-if 控制元素是否进入 DOM

v-if 是“真正”的条件渲染：表达式为真时，Vue 才会创建并插入该元素；为假时，元素完全不参与渲染，DOM 中不存在它。这意味着绑定的事件、子组件、计算属性等都会被销毁和重建。

• 支持链式判断：可配合 v-else-if 和 v-else 使用，注意它们必须紧邻，不能被其他元素隔开
• 多元素控制需用 包裹，因为 v-if 只能作用于单个元素节点
• 初始值为 false 时，对应内容不会执行任何初始化（惰性渲染），适合加载开销大的模块，比如弹窗、表单步骤

v-show 仅切换 display 样式

v-show 不管条件真假，元素始终存在于 DOM 中，只是通过 CSS 的 display: none/block 控制显隐。因此它没有渲染/卸载开销，但初始页面会包含所有 v-show 元素。

• 不支持 或 v-else，想模拟 else 效果得手动写 v-show="!condition"
• 适合频繁切换的场景，比如标签页切换、折叠面板、开关按钮对应的提示区
• 慎用于含大量子组件或定时器的区域——即使隐藏了，内部逻辑仍在运行

v-if 和 v-show 怎么选

关键看切换频率和资源消耗：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

立即学习“前端免费学习笔记（深入）”；

• 条件几乎不变（如用户登录态、权限开关）→ 用 v-if
• 需要快速反复显示/隐藏（如鼠标悬停提示、菜单展开收起）→ 用 v-show
• 不确定时，优先测首屏加载时间和交互响应：v-if 初始快但切换慢，v-show 初始略重但切换零延迟

常见写法示例

基础判断：

加载中...

多分支：

✅ 成功

❌ 失败

⏳ 进行中

包裹多个元素：

简单显隐：

菜单内容