Vue3 条件语句 8

Vue3 条件语句是 Vue3 中用于控制模板的渲染的语句。条件语句可以使用 v-if、v-else、v-else-if 等指令来实现。

1. v-if

v-if 指令用于在模板中添加条件语句。语法如下：

<template>
  <div v-if="condition">Condition is true</div>
</template>

在上面的代码中，v-if 指令将在 condition 变量的值为 true 时渲染 <div> 元素中的内容。

2. v-else

v-else 指令用于在模板中添加否则语句。语法如下：

<template>
  <div v-if="condition">Condition is true</div>
  <div v-else>Condition is false</div>
</template>

在上面的代码中，v-else 指令将在 condition 变量的值为 false 时渲染 <div> 元素中的内容。

3. v-else-if

v-else-if 指令用于在模板中添加否则语句。语法如下：

<template>
  <div v-if="condition1">Condition 1 is true</div>
  <div v-else-if="condition2">Condition 2 is true</div>
  <div v-else>Condition is false</div>
</template>

在上面的代码中，v-else-if 指令将在 condition1 变量的值为 false 时检查 condition2 变量的值，如果 condition2 变量的值为 true 时渲染 <div> 元素中的内容，否则渲染 <div> 元素中的内容。

4. v-show

v-show 指令用于在模板中添加显示语句。语法如下：

<template>
  <div v-show="condition">Condition is true</div>
</template>

在上面的代码中，v-show 指令将在 condition 变量的值为 true 时显示 <div> 元素中的内容，并在 condition 变量的值为 false 时隐藏 <div> 元素中的内容。