Close
升级到 Vue 3 | Vue 2 EOL

指南

条件渲染

在 Vue School 上学习关于条件渲染的免费课程

v-if

v-if 指令用于有条件地渲染一个块。只有当指令的表达式返回一个真值时，该块才会被渲染。

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

也可以使用 v-else 添加一个“else 块”。

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

在 <template> 上使用 v-if 的条件分组

因为 v-if 是一个指令，所以它必须附加到单个元素上。但是如果我们想切换多个元素呢？在这种情况下，我们可以在 <template> 元素上使用 v-if，它充当一个不可见的包装器。最终渲染的结果将不包括 <template> 元素。

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

v-else

可以使用 v-else 指令来指示 v-if 的“else 块”。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则它将不被识别。

v-else-if

2.1.0+ 中的新功能

v-else-if，顾名思义，充当 v-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 类似，v-else-if 元素必须紧跟在 v-if 或 v-else-if 元素之后。

使用 key 控制可重用元素

Vue 尝试尽可能高效地渲染元素，通常会重用它们而不是从头开始渲染。除了帮助 Vue 变得非常快之外，这还有一些有用的优势。例如，如果你允许用户在多种登录类型之间切换

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 不会删除用户已经输入的内容。由于两个模板都使用相同的元素，所以 <input> 不会被替换 - 只是它的 placeholder。

在输入框中输入一些文本，然后按下切换按钮，自己尝试一下。

但这并不总是可取的，所以 Vue 提供了一种方法让你说，“这两个元素是完全独立的 - 不要重用它们。”添加一个带有唯一值的 key 属性。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

现在，每次你切换时，这些输入框都会从头开始渲染。自己试试看。

请注意，<label> 元素仍然可以高效地重用，因为它们没有 key 属性。

v-show

另一个有条件地显示元素的选项是 v-show 指令。用法基本相同。

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

不同之处在于，带有 v-show 的元素将始终被渲染并保留在 DOM 中；v-show 只是切换元素的 display CSS 属性。

请注意，v-show 不支持 <template> 元素，也不与 v-else 一起使用。

v-if 与 v-show

v-if 是“真正的”条件渲染，因为它确保在切换期间，条件块内的事件监听器和子组件被正确销毁和重新创建。

v-if 也是惰性的：如果条件在初始渲染时为假，它将不会执行任何操作 - 条件块将不会被渲染，直到条件第一次变为真。

相比之下，v-show 则简单得多 - 元素始终被渲染，无论初始条件如何，都使用基于 CSS 的切换。

一般来说，v-if 的切换成本更高，而 v-show 的初始渲染成本更高。因此，如果你需要经常切换某个东西，请首选 v-show；如果条件在运行时不太可能改变，请首选 v-if。

v-if 与 v-for

不建议将 v-if 和 v-for 一起使用。有关更多信息，请参阅风格指南。

当与 v-if 一起使用时，v-for 的优先级高于 v-if。有关详细信息，请参阅列表渲染指南。

← 类和样式绑定 列表渲染 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。