Vue 3 条件渲染（超详细）
一则或许对你有用的小广告
欢迎加入小哈的星球，你将获得：专属的实战项目（4个项目都能学） / 1v1 提问 / 简历修改 / Java 学习路线 / 社群讨论 / 学习打卡 / 每月赠书
《Spring AI 项目实战（问答机器人、RAG 智能客服、联网搜索）》已完结，基于
Spring AI + Spring Boot 3.x + JDK 21...，查看介绍《从零手撸：仿小红书（微服务架构）》 已完结，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，查看介绍；演示链接：http://116.62.199.48:7070/《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接：http://116.62.199.48/
新开坑项目：《从零手撸：秒杀系统高并发优化实战》 正在更新中...，查看介绍
截止目前，星球内专栏累计输出 150w+ 字，讲解图 5110+ 张，还在持续爆肝中.. 后续还会上新更多项目，已有 4700+ 小伙伴加入学习，欢迎点击围观
大家好，我是小哈。
本小节中，我们将学习如何在 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>