7. Conditional Rendering（有条件的呈现）

带条件的渲染

v-if

在字符串模板中，例如Handlebars，我们会写这样一个条件块：

<!-- Handlebars template -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在Vue中，我们使用v-if指令来实现相同的目标：

<h1 v-if="ok">Yes</h1>

也可以在v-else添加一个“else块” ：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

在<template>带有v-if的条件组

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

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

v-else

您可以使用该v-else指令来指示v-if的“else block” ：

<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

New in 2.1.0+

v-else-if，顾名思义，作为v-if的一个“else if block” 。它也可以被多次链接：

<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 属性。

请注意，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。有关详情，请参阅列表渲染指南。