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?pwd1234提取码1234具体位置 - 第四阶段富客户端技术里面Vue3专题 - 条件渲染条件渲染用来根据数据的真假决定某块 DOM 要不要显示。Vue3 提供v-if/v-else-if/v-else和v-show两套写法。适合登录后显示用户信息、空列表提示、切换 Tab 内容、权限控制可见区域等场景。1. 为什么需要条件渲染页面上经常有「有时显示、有时隐藏」的内容。如果用原生 JS 手动改display或增删节点逻辑会散落各处。用指令绑定响应式数据数据一变界面自动切换!-- 不推荐到处手写显示隐藏 -- p v-ifisLogin已登录/p !-- 比手动操作 DOM 更清晰 --2. v-if / v-else-if / v-else2.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-ifisLogin欢迎回来/p p v-else请先登录/p button clicktoggleLogin {{ isLogin ? 退出 : 登录 }} /button /template要点v-else必须紧挨在带v-if或v-else-if的元素后面条件为假时对应节点不会存在于 DOM不是隐藏是不创建运行截图2.2 多分支v-else-if类似if / else if / elsescript setup /** * v-else-if 多分支 Demo * 根据分数显示等级 */ import { ref } from vue const score ref(75) /script template p 分数 input v-model.numberscore typenumber / /p p v-ifscore 90优秀/p p v-else-ifscore 60及格/p p v-else不及格/p /template运行截图2.3 用template包一组元素想一次性控制多个相邻标签时用template包起来template本身不会渲染成真实标签template v-ifisLogin h3个人中心/h3 p昵称小明/p p角色普通用户/p /template3. v-showv-show始终会渲染元素只是通过 CSS 的display切换显示/隐藏script setup /** * v-show Demo * 点击按钮显示 / 隐藏提示框 */ import { ref } from vue const visible ref(true) /script template p v-showvisible这段文字用 v-show 控制/p button clickvisible !visible切换显示/button /template运行截图注意v-show没有v-else也不能用在template上。4. v-if 和 v-show 怎么选v-ifv-show原理条件为假时不创建 DOM始终在 DOM改display切换开销较大创建/销毁较小只改样式初始开销条件为假时更轻无论真假都会渲染适用很少切换、条件决定是否存在频繁切换显示隐藏简单记偶尔切换、或根本不需要这块 DOM→ 用v-if经常点来点去切换显示→ 用v-show5. 入门综合 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-showshowTip classtip 提示点击下方按钮切换角色观察内容变化 /p button clickshowTip !showTip {{ showTip ? 隐藏提示 : 显示提示 }} /button hr / div v-ifrole admin h3管理员面板/h3 p你可以管理用户和查看统计数据。/p /div div v-else-ifrole user h3普通用户/h3 p欢迎回来可以浏览内容和修改个人资料。/p /div div v-else h3游客模式/h3 p请先登录后使用完整功能。/p /div div classactions button clicksetRole(guest)游客/button button clicksetRole(user)用户/button button clicksetRole(admin)管理员/button /div /template style .tip { background: #e6f4ff; padding: 8px 12px; border-radius: 6px; } .actions { margin-top: 12px; } .actions button { margin-right: 8px; } /style运行效果预期初始显示蓝色提示条内容为「游客模式」点「用户 / 管理员」中间区域换成对应文案v-if分支切换点「隐藏提示」提示条消失但 DOM 仍在v-show运行截图