Vue学习v-if与v-else-if

---

一、前言

v-if 和 v-else-if 是 Vue.js 中用于条件渲染的指令，它们通常与 v-else 一起使用。下面我来详细解释一下它们的用法和区别：

1、v-if

• 用法：v-if 是一个指令，它接受一个表达式作为参数。当这个表达式的值为真时，它所在的元素会被渲染到 DOM 中，否则会从 DOM 中移除。
• 示例：

<div v-if="condition">
  条件为真时显示的内容
</div>

2、v-else-if

• 用法：v-else-if 也是一个指令，用于在 v-if 的条件不满足时，进一步检查另一个条件。它接受一个表达式作为参数，当该表达式的值为真时，它所在的元素会被渲染到 DOM 中。
• 注意：v-else-if 必须紧跟在 v-if 或者另一个 v-else-if 后面。
• 示例：

<div v-if="condition1">
  条件1为真时显示的内容
</div>
<div v-else-if="condition2">
  条件1不满足，条件2为真时显示的内容
</div>

3、v-else

• 用法：v-else 是一个指令，用于在 v-if 和 v-else-if 的条件都不满足时，渲染一个默认的内容。它不需要接受任何参数。
• 注意：v-else 必须紧跟在 v-if 或者 v-else-if 后面，不能单独使用。
• 示例：

<div v-if="condition1">
  条件1为真时显示的内容
</div>
<div v-else-if="condition2">
  条件1不满足，条件2为真时显示的内容
</div>
<div v-else>
  条件1和条件2都不满足时显示的默认内容
</div>

4、示例

<div v-if="status === 'active'">
  用户状态：活跃
</div>
<div v-else-if="status === 'inactive'">
  用户状态：不活跃
</div>
<div v-else>
  用户状态：未知
</div>

在这个示例中，根据 status 的不同取值，会渲染不同的内容。如果 status 是 “active”，则显示 “用户状态：活跃”，如果 status 是 “inactive”，则显示 “用户状态：不活跃”，否则显示 “用户状态：未知”。