学习Vue 02-20 使用v-if实现条件渲染

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。