Vue3 条件语句详解
本指南将用简单易懂的方式讲解Vue3中的条件渲染，包括v-if、v-else-if、v-else和v-show指令的使用方法和区别，适合编程初学者学习。
1
v-if 指令
v-if 是Vue中最基础的条件指令，它像一个开关：当条件成立时，显示元素；条件不成立时，完全移除元素。
通俗理解： 就像家里的电灯开关，”开”时灯亮（显示），”关”时灯灭（完全消失）。
基本用法：
<div v-if=”condition”>
当condition为true时，我会显示
</div>
实际例子：
我是v-if控制的内容，当前状态：{{ isVisible ? ‘显示’ : ‘隐藏’ }}
注意点：
- v-if 是”真正”的条件渲染，元素会被销毁和重建
- 切换开销较高，适合不经常改变的条件
- 可以配合 v-else-if 和 v-else 使用
2
v-else 和 v-else-if
v-else 和 v-else-if 必须紧跟在 v-if 或 v-else-if 元素后面，形成一个完整的条件链。
通俗理解： 就像选择题：
v-if：条件A成立吗？→ 成立显示A
v-else-if：A不成立？那条件B成立吗？→ 成立显示B
v-else：A和B都不成立？→ 显示C
v-if：条件A成立吗？→ 成立显示A
v-else-if：A不成立？那条件B成立吗？→ 成立显示B
v-else：A和B都不成立？→ 显示C
基本用法：
<div v-if=”score >= 90″>优秀</div>
<div v-else-if=”score >= 80″>良好</div>
<div v-else-if=”score >= 60″>及格</div>
<div v-else>不及格</div>
实际例子：成绩评级
当前分数：{{ score }}
= 80″>良好 👍
3
v-show 指令
v-show 也用于条件显示，但方式不同：元素始终存在于DOM中，只是通过CSS的display属性来切换显示。
通俗理解： 就像房间里的灯，开关控制的是灯的亮灭（通过CSS隐藏），但灯泡本身一直都在。
基本用法：
<div v-show=”isActive”>
当isActive为true时我可见，为false时我不可见（但还在DOM中）
</div>
实际例子：
我是v-show控制的内容，当前状态：{{ isActive ? ‘显示’ : ‘隐藏’ }}
特点：
- 无论条件如何，元素始终保留在DOM中
- 只是通过CSS display属性切换显示（none/block）
- 初始渲染开销更高，但切换性能更好
- 不支持在 <template> 元素上使用
- 不能与 v-else 配合使用
v-if 与 v-show 核心区别
v-if 工作原理
- 元素存在性： 条件不满足时，元素从DOM中完全移除
- 初始渲染： 如果初始条件为false，则完全不渲染
- 切换开销： 每次切换都会销毁和重建元素（开销较大）
- 适用场景： 条件很少改变，或者需要条件块内组件完全销毁的情况
- 生命周期： 切换时触发组件的创建/销毁生命周期钩子
v-show 工作原理
- 元素存在性： 元素始终存在于DOM中，只是通过CSS控制显示
- 初始渲染： 无论初始条件如何，元素都会被渲染
- 切换开销： 切换只是修改CSS属性（开销很小）
- 适用场景： 需要频繁切换显示状态的元素
- 生命周期： 无论是否显示，组件的生命周期钩子都会被调用
选择建议：
✅ 需要频繁切换显示/隐藏 → 使用 v-show
✅ 条件在运行时很少改变 → 使用 v-if
✅ 需要条件分支（如if-else）→ 使用 v-if + v-else
✅ 初始条件可能为假且元素较重 → 使用 v-if（节省初始渲染资源）
✅ 需要频繁切换显示/隐藏 → 使用 v-show
✅ 条件在运行时很少改变 → 使用 v-if
✅ 需要条件分支（如if-else）→ 使用 v-if + v-else
✅ 初始条件可能为假且元素较重 → 使用 v-if（节省初始渲染资源）
4
在 <template> 上使用 v-if
当需要控制一组元素的显示/隐藏时，可以使用 <template> 标签包裹它们，然后在 template 上使用 v-if。
为什么需要： Vue需要单个根元素，如果想同时控制多个兄弟元素的显示而不添加额外div，template是完美解决方案。
基本用法：
<template v-if=”showDetails”>
<h3>详细标题</h3>
<p>详细内容描述…</p>
<img src=”detail.jpg” alt=”详情图”>
</template>
注意：
- template 本身不会被渲染到最终DOM中
- 只能使用 v-if，不能使用 v-show（v-show需要实际元素）
- 是一种分组元素而不引入额外DOM节点的好方法