Vue3 从零开始：条件渲染全面解析

1. 条件渲染概述

在 Vue3 中，条件渲染允许开发者根据某些条件来动态地显示或隐藏 HTML 元素。这种技术有助于提高代码的可读性和交互性，使 UI 能够对用户操作做出响应。

2. v-if、v-else-if 和 v-else 指令

2.1 v-if 指令

最常用的条件渲染指令是 v-if。它允许开发者在某个条件为真时显示一个元素，否则隐藏该元素。语法如下：

<template>
  <div v-if="condition">
    ...
  </div>
</template>

其中，condition 是一个 JavaScript 表达式，如果为真，则显示 <div> 元素；否则隐藏该元素。

2.2 v-else-if 和 v-else 指令

v-else-if 和 v-else 指令与 v-if 指令一起使用，可以实现更复杂的条件渲染逻辑。v-else-if 指令允许开发者在另一个条件为真时显示一个元素，否则隐藏该元素。语法如下：

<template>
  <div v-if="condition1">
    ...
  </div>
  <div v-else-if="condition2">
    ...
  </div>
  <div v-else>
    ...
  </div>
</template>

其中，condition1 和 condition2 是 JavaScript 表达式，如果 condition1 为真，则显示第一个 <div> 元素；如果 condition2 为真，则显示第二个 <div> 元素；否则显示第三个 <div> 元素。

3. 三元表达式

三元表达式也是一种实现条件渲染的常见方法。语法如下：

condition ? trueValue : falseValue

其中，condition 是一个 JavaScript 表达式，如果为真，则返回 trueValue；否则返回 falseValue。

4. computed 和 watch 属性

computed 和 watch 属性也可以用于实现条件渲染。computed 属性允许开发者定义一个计算属性，该属性的值依赖于其他属性的值。语法如下：

computed: {
  computedProperty: {
    get() {
      // 计算属性的计算逻辑
    }
  }
}

watch 属性允许开发者监听某个属性的变化，并做出相应的响应。语法如下：

watch: {
  watchedProperty: {
    handler(newValue, oldValue) {
      // 属性变化时的响应逻辑
    }
  }
}

5. 总结

条件渲染是 Vue3 中一项重要的技术，它允许开发者根据某些条件来动态地显示或隐藏 HTML 元素。通过合理使用条件渲染，开发者可以提高代码的可读性和交互性，使 UI 能够对用户操作做出响应。