Vue 中的条件渲染

Vue 是一款流行的前端框架，它提供了多种条件渲染的方式来处理视图层的渲染。这些条件渲染方法可以让我们根据不同的情况来渲染不同的结果，从而达到更好的用户体验。在本文中，我们将深入了解 Vue 中的条件渲染，并提供一些实际应用的示例，帮助你学习和使用 Vue 中的条件渲染功能。

v-if 指令

v-if 指令可以让我们根据条件来渲染或者不渲染元素。例如，我们需要根据一个变量来判断是否显示某个 div，可以这样写：

<template>
  <div>
    <div v-if="showDiv">
      这是一个条件渲染的 div
    </div>
  </div>
</template>

这里的 v-if 指令会根据 showDiv 这个变量的值来判断是否渲染内部的 div 元素。如果 showDiv 的值为 true，那么这个 div 将会被显示，否则将不显示。需要注意的是，如果这个 div 在 v-if 的条件下不显示，那么它也不会被渲染到页面上。

v-if 指令也支持在条件不满足时显示备选内容，即 v-else 指令。例如：

// javascriptcn.com 代码示例
<template>
  <div>
    <div v-if="showDiv">
      这是 div1
    </div>
    <div v-else>
      这是 div2
    </div>
  </div>
</template>

这里的 v-else 指令会在 showDiv 不为 true 的时候显示 "这是div2" 的内容。

除了 v-else，v-if 还支持 v-else-if，用于判断多个条件。例如：

// javascriptcn.com 代码示例
<template>
  <div>
    <div v-if="type === 'A'">
      这是类型 A 的数据
    </div>
    <div v-else-if="type === 'B'">
      这是类型 B 的数据
    </div>
    <div v-else>
      这是其他类型的数据
    </div>
  </div>
</template>

这里的 v-else-if 指令可以判断多个条件，如果 type 不是 A 也不是 B 的，那么会显示 "这是其他类型的数据" 的内容。

v-show 指令

v-show 指令类似于 v-if，也可以根据条件来控制元素的显示和隐藏。但是和 v-if 不同的是，v-show 会在页面渲染时将相应的元素渲染出来，只是通过 CSS 控制元素的显示和隐藏。因此，v-show 不像 v-if 那样会有额外的切换开销。

<template>
  <div>
     <div v-show="showDiv">
        这是一个条件渲染的 div
     </div>
  </div>
</template>

这里的 v-show 指令可以根据 showDiv 的值来控制 div 的显示和隐藏。如果 showDiv 的值为 true，那么这个 div 将会被显示，否则将不显示。

需要注意的是，由于 v-show 只是在 CSS 层面控制元素的显示和隐藏，因此它不能和 v-else 一起使用。如果需要在条件不满足时显示备选内容，就需要使用 v-if 和 v-else。

v-if 和 v-show 的使用场景

在实际开发中，我们需要根据具体的场景来选择使用 v-if 还是 v-show。一般来说，v-if 适合在需要频繁切换的场景中使用，因为它可以避免不必要的 DOM 操作。而 v-show 则更适合在需要频繁显示和隐藏元素的场景中使用，例如一些交互性比较强的组件（比如弹窗）。

总结

Vue 的条件渲染方法包括 v-if 和 v-show，它们的使用场景不同，需要根据具体的场景选择。v-if 可以根据条件来渲染或者不渲染元素，并提供 v-else 和 v-else-if 用于处理复杂的条件控制；v-show 可以根据条件来控制元素的显示和隐藏，但是它在页面渲染时仍会将相应的元素渲染出来。

在实际开发中，我们常常需要根据用户操作或者其他条件来控制元素的显示和隐藏，因此深入了解 Vue 中的条件渲染方法对于我们编写高质量的代码非常重要。

示例代码

// javascriptcn.com 代码示例
<template>
  <div>
    <div v-if="showDiv">
      这是一个条件渲染的 div
    </div>
    <div v-else>
      这是备选内容
    </div>
    <div v-show="showDiv">
      这是一个条件渲染的 div（使用 v-show）
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv: true
    }
  }
}
</script>

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653622a57d4982a6ebe0270f