Vue3专题 - 条件渲染

大家好，我是Java1234_小锋老师，最近更新 《一天学会 Vue3 + Vite + element-plus UI框架 视频教程》专辑，感谢大家支持。

本课程主要介绍和讲解 Vue3框架，Vite构建工具，以及element-plus UI框架。Vue3核心知识介绍，Vite构建工具使用，以及element-plus UI框架的基础组件，配置组件，Form 表单组件，Data 数据展示组件，Navigation导航组件，Feedback反馈组件，Container布局组件介绍和使用。

视频教程+课件+源码打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234
提取码：1234

具体位置 - > 第四阶段富客户端技术里面

Vue3专题 - 条件渲染

条件渲染用来根据数据的真假，决定某块 DOM 要不要显示。Vue3 提供v-if/v-else-if/v-else和v-show两套写法。

适合：登录后显示用户信息、空列表提示、切换 Tab 内容、权限控制可见区域等场景。

1. 为什么需要条件渲染？

页面上经常有「有时显示、有时隐藏」的内容。如果用原生 JS 手动改display或增删节点，逻辑会散落各处。用指令绑定响应式数据，数据一变，界面自动切换：

<!-- 不推荐：到处手写显示隐藏 --> <p v-if="isLogin">已登录</p> <!-- 比手动操作 DOM 更清晰 -->

2. v-if / v-else-if / v-else

2.1 基本用法

v-if的表达式为真时，才会渲染该元素；为假则不会创建到 DOM 里。

<script setup> /** * v-if 基础 Demo * 根据登录状态显示不同内容 */ import { ref } from 'vue' const isLogin = ref(false) /** 切换登录状态 */ function toggleLogin() { isLogin.value = !isLogin.value } </script> <template> <p v-if="isLogin">欢迎回来</p> <p v-else>请先登录</p> <button @click="toggleLogin"> {{ isLogin ? '退出' : '登录' }} </button> </template>

要点：

• v-else必须紧挨在带v-if（或v-else-if）的元素后面
• 条件为假时，对应节点不会存在于 DOM（不是隐藏，是不创建）

运行截图：

2.2 多分支：v-else-if

类似if / else if / else：

<script setup> /** * v-else-if 多分支 Demo * 根据分数显示等级 */ import { ref } from 'vue' const score = ref(75) </script> <template> <p> 分数： <input v-model.number="score" type="number" /> </p> <p v-if="score >= 90">优秀</p> <p v-else-if="score >= 60">及格</p> <p v-else>不及格</p> </template>

运行截图：

2.3 用<template>包一组元素

想一次性控制多个相邻标签时，用<template>包起来（<template>本身不会渲染成真实标签）：

<template v-if="isLogin"> <h3>个人中心</h3> <p>昵称：小明</p> <p>角色：普通用户</p> </template>

3. v-show

v-show始终会渲染元素，只是通过 CSS 的display切换显示/隐藏：

<script setup> /** * v-show Demo * 点击按钮显示 / 隐藏提示框 */ import { ref } from 'vue' const visible = ref(true) </script> <template> <p v-show="visible">这段文字用 v-show 控制</p> <button @click="visible = !visible">切换显示</button> </template>

运行截图：

注意：v-show没有v-else，也不能用在<template>上。

4. v-if 和 v-show 怎么选？

简单记：

• 偶尔切换、或根本不需要这块 DOM→ 用v-if
• 经常点来点去切换显示→ 用v-show

5. 入门综合 Demo

一个小面板：根据用户类型显示不同欢迎语，并用v-show控制提示条。

<script setup> /** * 条件渲染综合 Demo * - v-if / v-else-if / v-else：按角色显示内容 * - v-show：控制提示条显隐 */ import { ref } from 'vue' /** 角色：guest | user | admin */ const role = ref('guest') /** 是否显示顶部提示 */ const showTip = ref(true) /** 切换角色 */ function setRole(next) { role.value = next } </script> <template> <p v-show="showTip" class="tip"> 提示：点击下方按钮切换角色，观察内容变化 </p> <button @click="showTip = !showTip"> {{ showTip ? '隐藏提示' : '显示提示' }} </button> <hr /> <div v-if="role === 'admin'"> <h3>管理员面板</h3> <p>你可以管理用户和查看统计数据。</p> </div> <div v-else-if="role === 'user'"> <h3>普通用户</h3> <p>欢迎回来，可以浏览内容和修改个人资料。</p> </div> <div v-else> <h3>游客模式</h3> <p>请先登录后使用完整功能。</p> </div> <div class="actions"> <button @click="setRole('guest')">游客</button> <button @click="setRole('user')">用户</button> <button @click="setRole('admin')">管理员</button> </div> </template> <style> .tip { background: #e6f4ff; padding: 8px 12px; border-radius: 6px; } .actions { margin-top: 12px; } .actions button { margin-right: 8px; } </style>

运行效果预期：

1. 初始：显示蓝色提示条，内容为「游客模式」
2. 点「用户 / 管理员」：中间区域换成对应文案（v-if分支切换）
3. 点「隐藏提示」：提示条消失但 DOM 仍在（v-show）

运行截图：