8. 条件渲染

本节目标：学会 v-if、v-else、v-show 控制元素显隐，理解它们的区别和适用场景。

v-if

v-if 根据条件渲染或销毁元素：

<h1 v-if="awesome">Vue is awesome!</h1>

条件为 truthy 时渲染，falsy 时完全移除。

v-else 表示 v-if 的”else 块”：

<button @click="awesome = !awesome">切换</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

Note

v-else 元素必须紧跟在 v-if 或 v-else-if 后面，否则不识别。

v-else-if 是”else if”，可以链式使用：

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

同样，v-else-if 必须紧跟在 v-if 或另一个 v-else-if 后面。

v-if 只能绑定一个元素。要切换多个元素怎么办？用 <template> 当隐形包装器：

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

最终渲染结果不包含 <template>，它只是个占位。v-else 和 v-else-if 也能用在 <template> 上。

另一个控制显隐的指令是 v-show：

<h1 v-show="ok">Hello!</h1>

区别在于：v-show 的元素始终存在 DOM 里，只是切换 display CSS 属性。

v-show 不支持 <template>，也不支持 v-else。

怎么选？看这个对比：

Tip

频繁切换用 v-show，运行时条件很少改变用 v-if。

不推荐在同一个元素上同时用 v-if 和 v-for，因为 v-if 优先级更高。这意味着 v-if 拿不到 v-for 作用域的变量：

<!-- 会报错：todo 未定义 -->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

正确做法——把 v-for 移到 <template> 上：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>