Vue 3 条件渲染(超详细)

更新时间 2023-05-16 16:53:57

大家好,我是小哈。

本小节中,我们将学习如何在 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>
    <!-- 否则渲染下面标签的内容 -->
    <div v-else>www.quanxiaoha.com</div>
</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>
    <!-- 条件都不满足,则渲染下面标签的内容 -->
    <div v-else>www.quanxiaoha.com</div>
</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>