当前位置：首页 > ops >正文

vue 条件渲染（v-if v-else-if v-else v-show）

ops 2025/7/6 11:39:03

好的，我们来详细讲解 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 时，它们才会被重新创建和挂载。

示例：根据分数显示不同等级

<!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; 会被移除，元素恢复可见。

示例：切换内容的可见性

<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 切换、折叠面板、模态框的显示/隐藏）。