Vue 3 条件渲染(超详细)

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

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书活动

目前, 星球 内第2个项目《仿小红书(微服务架构)》正在更新中。第1个项目:全栈前后端分离博客项目已经完结,演示地址:http://116.62.199.48/。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 255 小节,累计 39w+ 字,讲解图:1716 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 1300+ 小伙伴加入,欢迎点击围观

大家好,我是小哈。

本小节中,我们将学习如何在 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>