Vue 3 条件渲染（超详细）

大家好，我是小哈。

本小节中，我们将学习如何在 Vue 3 中进行条件判断，然后渲染对应的内容。

v-if 指令

v-if 指令用于条件判断，当指令中的表达式为 true 时，则渲染其内容。示例代码如下：

<template>
    <!-- 通过 v-if 指令判断 isShow 是否为 true, 若是则渲染 <a> 标签，否则不渲染 -->
    <a href="https://www.quanxiaoha.com" v-if="isShow">犬小哈教程</a>
</template>

<script setup>
  import { ref } from 'vue'
  
  // 设置 isShow 变量为 true
  const isShow = ref(true) 
</script>

运行效果如下：

v-else 指令

有 if 语句就会有 else 语句。v-else 通常与 v-if 搭配使用，当 v-if 表达式为 false 时，则会渲染 v-else 对应的标签。示例代码如下：

<template>
    <!-- 通过 v-if 指令判断 isShow 是否为 true, 若是则渲染 <a> 标签 -->
    <a href="https://www.quanxiaoha.com" v-if="isShow">犬小哈教程</a>
    <!-- 否则渲染下面标签的内容 -->
    www.quanxiaoha.com
</template>

<script setup>
  import { ref } from 'vue'
  // 设置 isShow 变量为 false
  const isShow = ref(false) 
  
</script>

运行效果如下：

v-else-if 指令

多条件判断可使用 v-else-if 指令，必须跟在 v-if 或者 v-else-if 之后使用。示例代码如下：

<template>
    <!-- 多条件判断 type 变量的数值 -->
    <a href="https://www.quanxiaoha.com" v-if="type === 1">犬小哈教程1</a>
    <a href="https://www.quanxiaoha.com" v-else-if="type === 2">犬小哈教程2</a>
    <a href="https://www.quanxiaoha.com" v-else-if="type === 3">犬小哈教程3</a>
    <!-- 条件都不满足，则渲染下面标签的内容 -->
    www.quanxiaoha.com
</template>

<script setup>
  import { ref } from 'vue'
  // 初始化 type 变量的值为 2
  const type = ref(2) 
  
</script>

运行结果如下：

v-show 指令

v-show 指令的用法与 v-if 基本一样，不同点在于 v-show 会改变元素的 CSS 属性 display。当 v-show 中的表达式为 true 时，则会显示；为 false 时，则会隐藏，并应用样式为 display: none。

示例代码如下：

<template>
    <a href="https://www.quanxiaoha.com" v-show="isShow">犬小哈教程</a>
</template>

<script setup>
  import { ref } from 'vue'
  const isShow = ref(true) 
</script>