Vue条件渲染-使用v-if和v-show实现条件渲染和元素显示/隐藏

NineSenz 8/3/2023 Vue.js

在Vue.js中，条件渲染是一种常用的技术，它允许我们根据特定的条件来决定是否渲染DOM元素或组件。Vue.js提供了多种指令来实现条件渲染，其中包括v-if、v-show、v-else和v-else-if等。在本章中，我们将深入了解这些指令的用法和区别。

# v-if vs v-show的区别

v-if和v-show都是条件渲染的指令，它们的主要区别在于渲染的实现方式和性能。

v-if指令是“真正”的条件渲染，它根据表达式的真假值来决定是否渲染元素。当条件为真时，元素将被渲染到DOM中；当条件为假时，元素将从DOM中移除。

<div v-if="isVisible">This will only be rendered if 'isVisible' is true.</div>

v-show指令也是条件渲染，但它的实现方式不同。使用v-show时，元素始终会被渲染到DOM中，只是通过CSS的display属性来控制元素的可见性。

<div v-show="isVisible">This will be hidden if 'isVisible' is false.</div>

如果需要频繁切换元素的可见性，并且初始渲染时通常是不可见的，推荐使用v-show。因为v-show只是通过CSS来控制可见性，切换时不会重新渲染元素，所以性能更高。
如果元素的可见性在初始化后很少发生变化，并且在切换时有较高的开销，推荐使用v-if。因为v-if在条件为假时会从DOM中移除元素，这样可以减少DOM操作的成本。

除了v-if和v-show，Vue.js还提供了v-else和v-else-if指令，用于在条件渲染中添加更多的逻辑。

v-else指令用于与v-if配合使用，在同一个元素上指定一个“否定”的条件。它表示，如果前面的v-if条件为假，那么当前元素就会被渲染。

<div v-if="isLoggedin">
  Welcome, user!
</div>
<div v-else>
  Please log in.
</div>

1
2
3
4
5
6

在上面的例子中，如果isLoggedin为真，则显示"Welcome, user!"；否则，显示"Please log in."。

v-else-if指令用于与v-if和v-else配合使用，在同一个元素上指定一个附加的条件。它表示，如果前面的v-if条件为假，并且当前v-else-if条件为真，则当前元素会被渲染。

<div v-if="status === 'success'">
  Success!
</div>
<div v-else-if="status === 'error'">
  Error!
</div>
<div v-else>
  Loading...
</div>

1
2
3
4
5
6
7
8
9

在上面的例子中，如果status为"success"，则显示"Success!"；如果status为"error"，则显示"Error!"；否则，显示"Loading..."。

使用v-else和v-else-if可以构建复杂的条件渲染逻辑，使我们能够根据不同的条件来渲染不同的内容。

Vue.js的条件渲染指令，包括v-if、v-show、v-else和v-else-if。通过灵活运用这些指令，我们可以根据特定的条件动态地渲染不同的内容，从而实现更加交互性和可定制化的用户界面。