20 使用v-if实现条件渲染
We also can generate or remove an element from the DOM, a scenario called conditional rendering.
我们还可以从 DOM 中生成或移除元素，这种情况称为条件呈现。
Assume we have a Boolean data property isVisible, which decides if Vue should render a text element into the DOM and make it visible to the user.
假设我们有一个布尔数据属性 isVisible，它决定 Vue 是否应将文本元素呈现到 DOM 中，并使其对用户可见。
Binding directive v-if to isVisible by placing v-if=“isVisible” on the text element enables reactively rendering the element only when isVisible is true (Example 2-12).
通过在文本元素上放置 v-if=“isVisible”，将指令 v-if 与 isVisible 绑定，就能仅在 isVisible 为 true 时才反应式地呈现该元素（例 2-12）。
<script>
export default {
data() {
return {
isVisible: false
}
},
methods: {
}
}
</script>
<template>
<div>
<div v-if="isVisible">I'm the text in toggle</div>
<div>Visibility: {
{ isVisible }}</div>
</div>
</template>
When setting isVisible to false, the generated DOM elements will look like this:
当设置 isVisible 为 false 时，生成的 DOM 元素将如下所示：
<div>
<!--v-if-->
<div>Visibility: false</div>
</div>
Otherwise, the text element will be visible in the DOM:
否则，文本元素将在 DOM 中可见：
<div>
<div>I'm the text in toggle</div>
<div>Visibility: true</div>
</div>
If we want to render a different component for the opposite condition (isVisible is false), v-else is the right choice. Unlike v-if, you use velse without binding to any data property. It takes the correct condition value based on the immediate preceding v-if usage in the same context level.
如果我们想在相反的条件下（isVisible 为 false）呈现不同的组件，v-else 就是正确的选择。与 v-if 不同，使用 velse 时无需绑定任何数据属性。它根据同一上下文层中紧接着的 v-if 使用情况来获取正确的条件值。
For example, as Example 2-13 shows, we can create a component with the following code block with both v-if and v-else.
例如，如例 2-13 所示，我们可以用以下代码块创建一个同时包含 v-if 和 v-else 的组件。
<script>
export default {
data() {
return {
isVisible: false
}
},
methods: {
}
}
</script>
<template>
<div>
<div v-if="isVisible">I'm the visible text</div>
<div v-else>I'm the replacement text</div>
</div>
</template>
In short, you can translate the previous conditions into similar logical expressions as:
简而言之，您可以将前面的条件转化为类似的逻辑表达式：
<!--if isVisible is true, then render -->
<div>I'm the visible text</div>
<!-- else render -->
<div>I'm the replacement text</div>
As in any if…else logic expression, we can always extend the condition check with an else if condition block. This condition block equals a velse-if directive and also requires a JavaScript condition statement.
在任何 if…else 逻辑表达式中，我们都可以使用 else if 条件块来扩展条件检查。该条件块等同于 velse-if 指令，也需要 JavaScript 条件语句。
Example 2-14 shows how to display a text, I’m the subtitle text, when isVisible is false and showSubtitle is true.
例 2-14 展示了当 isVisible 为 false 且 showSubtitle 为 true 时，如何显示文本（我是字幕文本）。
<script>
export default {
data() {
return {
isVisible: false,
showSubtitle: false,
}
},
methods: {
}
}
</script>
<template>
<div>
<div v-if="isVisible">I'm the visible text</div>
<div v-else-if="showSubtitle">I'm the subtitle text</div>
<div v-else>I'm the replacement text</div>
</div>
</template>
While using v-if means to render an element conditionally, there are situations where it won’t be efficient to mount/unmount an element from the DOM so frequently.
虽然使用 v-if 可以有条件地渲染元素，但在某些情况下，频繁地从 DOM 挂载/卸载元素并不高效。
In such cases, it’s better to use v-show.
在这种情况下，最好使用 v-show。
