好的，我们来详细讲解 Vue 中用于条件渲染的四个指令：v-if, v-else-if, v-else 和 v-show。
这四个指令都用于根据条件来显示或隐藏元素，但它们的工作方式和适用场景有非常重要的区别，特别是 v-if 和 v-show 的对比，是 Vue 面试中的高频题。
v-if、v-else-if、v-else：真正的条件渲染
这一组指令用于实现程序中经典的 if...else if...else 逻辑。它们是**"真正的"条件渲染，因为它们会真正地创建或销毁** DOM 元素。
v-if: 当指令的表达式返回真值 (Truthy) 时，元素及其内容才会被渲染。v-else-if: 必须紧跟在v-if或另一个v-else-if后面。当前面的条件不满足，而自身的条件满足时，它才会被渲染。v-else: 必须紧跟在v-if或v-else-if后面。当所有前面的条件都不满足时，它会被渲染。
工作原理
如果条件为 false，包含 v-if 的元素以及它所有的子组件和事件监听器都会被从 DOM 中完全移除（销毁） 。当条件变为 true 时，它们才会被重新创建和挂载。
示例：根据分数显示不同等级
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>v-if 示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h3>请输入您的分数 (0-100)</h3>
<input type="number" v-model.number="score" min="0" max="100">
<div v-if="score >= 90" style="color: green; margin-top: 10px;">
<p>等级: 优秀 (A)</p>
<span>继续努力，你是最棒的！</span>
</div>
<div v-else-if="score >= 75" style="color: blue; margin-top: 10px;">
<p>等级: 良好 (B)</p>
</div>
<div v-else-if="score >= 60" style="color: orange; margin-top: 10px;">
<p>等级: 及格 (C)</p>
</div>
<div v-else style="color: red; margin-top: 10px;">
<p>等级: 不及格 (D)</p>
<span>需要加油哦！</span>
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const score = ref(95);
return { score };
}
}).mount('#app');
</script>
</body>
</html>关键点 ：在上面的例子中，同一时间 DOM 中只会存在四个等级 div 中的一个。你可以打开浏览器的开发者工具查看元素的变化。
v-show：基于 CSS 的显示切换
v-show 也用于根据条件显示或隐藏元素，但它的工作方式要简单得多。
工作原理
无论 v-show 的条件是 true 还是 false，元素始终都会被渲染在 DOM 中 。v-show 只是简单地通过切换元素的 CSS display 属性来控制其可见性。
- 条件为
false时：元素会被添加内联样式style="display: none;"。 - 条件为
true时：display: none;会被移除，元素恢复可见。
示例：切换内容的可见性
html
<div id="app2">
<button @click="isVisible = !isVisible">切换显示</button>
<h3 v-show="isVisible" style="margin-top: 10px;">
你好，我在这里！
</h3>
</div>
<script>
createApp({
setup() {
const isVisible = ref(true);
return { isVisible };
}
}).mount('#app2');
</script>关键点 ：当你切换按钮时，<h3> 标签只是在显示和隐藏之间切换，它从未被销毁或重新创建。
v-if 与 v-show 的核心区别与选择 (面试高频题)
这是理解条件渲染最重要的一环。
| 特性 | v-if |
v-show |
|---|---|---|
| 实现方式 | 真正的条件渲染，动态地创建或销毁DOM节点和组件。 | 基于 CSS display 属性的切换。 |
| DOM中是否存在 | 条件为 false 时，元素不存在于 DOM 中。 |
无论条件如何，元素始终存在于 DOM 中。 |
| 初始渲染开销 | 如果条件初始为 false，开销极低，因为它什么也不做。 |
无论条件如何，都有正常的初始渲染开销。 |
| 切换开销 | 高。每次切换都涉及元素的销毁和重建。 | 低。只是修改 CSS 属性，非常轻量。 |
如何选择？
根据它们的开销特性，我们可以得出清晰的选择策略：
-
使用
v-if的场景：- 当条件不经常改变时（例如，一次性的权限判断）。
- 当初始条件为
false时，可以节省初始渲染的性能。 - 当你需要确保元素及其子组件被完全销毁和重建时。
-
使用
v-show的场景：- 当需要非常频繁地切换元素的可见性时（例如，Tab 切换、折叠面板、模态框的显示/隐藏）。
一个简单的记忆法则：
频繁切换用 v-show，条件不常变用 v-if。