Vue.js 条件语句学习笔记Vue.js 中的条件渲染主要通过v-if、v-else-if、v-else和v-show指令实现。它们用于根据表达式的真假值来控制 DOM 元素的显示与隐藏。一、核心指令1.v-if/v-else-if/v-else这是一组互斥的条件指令类似于 JavaScript 中的if...else if...else。template div !-- 条件为 true 时渲染 -- p v-iftype A显示内容 A/p !-- 条件为 true 时渲染 -- p v-else-iftype B显示内容 B/p !-- 其他情况渲染 -- p v-else显示默认内容/p /div /template script setup import { ref } from vue const type ref(A) /script特点真/假切换如果条件为假元素完全不会被渲染到 DOM 中包括事件监听器和子组件。销毁与重建条件切换时Vue 会销毁旧元素并创建新元素触发组件的生命周期钩子如onUnmounted,onMounted。2.v-showtemplate p v-showisVisible这段文字通过 CSS 控制显示/p /template script setup import { ref } from vue const isVisible ref(true) /script特点CSS 切换元素始终存在于 DOM 中只是通过 CSS 的display: none属性来控制显示。初始渲染无论条件真假元素都会被渲染。切换开销切换时仅修改 CSS 样式不涉及 DOM 操作。二、v-ifvsv-show深度对比特性v-ifv-showDOM 存在性条件为假时元素不存在于 DOM元素始终存在于 DOM渲染机制真正的条件渲染销毁/重建CSS 切换 (display: none)初始开销低假时不渲染高始终渲染切换开销高涉及 DOM 操作和组件生命周期低仅修改 CSS适用场景运行时条件很少改变或初始条件为假需要频繁切换显示状态选择建议如果用户操作频繁导致显示/隐藏切换如 Tab 切换、折叠面板使用v-show。如果条件在运行时很少改变或者初始状态为假如登录页、错误提示使用v-if以节省初始渲染资源。三、template上的条件渲染当需要对多个元素进行条件渲染时可以将v-if放在template标签上。template本身不会渲染到 DOM 中只会渲染其内部的内容。template div !-- 如果条件为真渲染以下所有元素 -- template v-ifshowGroup h2标题/h2 p段落一/p p段落二/p /template !-- 否则渲染其他内容 -- template v-else p暂无内容/p /template /div /template script setup import { ref } from vue const showGroup ref(true) /script四、v-if与v-for的优先级问题重要在 Vue 3 中v-if的优先级高于v-for。这意味着v-if会先执行导致v-for中的变量在v-if中不可用。❌ 错误写法Vue 3!-- 错误v-if 无法访问 v-for 中的 item -- ul li v-foritem in items v-ifitem.isActive :keyitem.id {{ item.name }} /li /ul原因v-if先执行此时item变量尚未定义。✅ 正确写法方案 1使用计算属性推荐将过滤逻辑移到computed中保持模板简洁。template ul li v-foritem in activeItems :keyitem.id {{ item.name }} /li /ul /template script setup import { ref, computed } from vue const items ref([ { id: 1, name: A, isActive: true }, { id: 2, name: B, isActive: false }, { id: 3, name: C, isActive: true } ]) const activeItems computed(() { return items.value.filter(item item.isActive) }) /script方案 2使用template包裹将v-if放在外层的template上v-for放在内部元素上。template ul template v-foritem in items :keyitem.id li v-ifitem.isActive {{ item.name }} /li /template /ul /template注意在 Vue 2 中v-for优先级高于v-if行为相反。但在 Vue 3 中官方强烈建议避免在同一元素上同时使用这两个指令。五、实战示例1. 用户状态切换template div classuser-status !-- 登录状态 -- div v-ifisLoggedIn p欢迎回来{{ userName }}/p button clicklogout退出登录/button /div !-- 未登录状态 -- div v-else p请先登录/p button clicklogin去登录/button /div /div /template script setup import { ref } from vue const isLoggedIn ref(false) const userName ref(张三) function login() { isLoggedIn.value true } function logout() { isLoggedIn.value false } /script2. 错误提示与加载状态template div !-- 加载中 -- div v-ifloading span加载中.../span /div !-- 加载失败 -- div v-else-iferror p加载失败{{ errorMessage }}/p button clickretry重试/button /div !-- 加载成功 -- div v-else ul li v-foritem in dataList :keyitem.id{{ item.title }}/li /ul /div /div /template script setup import { ref } from vue const loading ref(true) const error ref(false) const errorMessage ref() const dataList ref([]) // 模拟数据加载 function fetchData() { loading.value true error.value false setTimeout(() { loading.value false // 模拟成功或失败 if (Math.random() 0.5) { dataList.value [{ id: 1, title: 数据 1 }] } else { error.value true errorMessage.value 网络错误 } }, 1000) } function retry() { fetchData() } fetchData() /script3. 权限控制简单版template div h1后台管理系统/h1 !-- 管理员可见 -- div v-ifuserRole admin button删除用户/button button修改系统设置/button /div !-- 普通用户可见 -- div v-else-ifuserRole user button查看资料/button button修改密码/button /div !-- 访客 -- div v-else p您没有访问权限/p /div /div /template script setup import { ref } from vue const userRole ref(admin) // 可切换测试 /script六、最佳实践总结优先使用v-if除非需要频繁切换否则v-if是默认选择因为它能避免不必要的 DOM 渲染。避免v-if和v-for混用使用计算属性过滤数据或改用template包裹。利用template当需要条件渲染多个元素时使用template避免产生多余的 DOM 节点。逻辑外移复杂的条件判断逻辑应移至computed或methods中保持模板简洁。性能优化对于大型列表或复杂组件的条件渲染v-if能显著减少初始渲染时间。七、常见陷阱陷阱 1v-if初始值为false时的性能如果初始条件为falsev-if不会渲染节省资源。但如果初始为true则必须渲染。!-- 初始不渲染节省资源 -- div v-iffalse内容/div陷阱 2v-show无法阻止事件绑定v-show只是隐藏元素事件监听器依然绑定在元素上。如果元素被隐藏但事件依然触发如通过 JS 触发可能会产生意外行为。!-- 即使隐藏点击事件依然可能触发如果通过 JS 调用 -- button v-showfalse clickhandleClick隐藏按钮/button陷阱 3组件生命周期使用v-if切换组件时组件会经历完整的挂载和卸载过程。template MyComponent v-ifshow / /template script setup import { ref } from vue const show ref(true) // 切换时MyComponent 的 onMounted 和 onUnmounted 会被触发 /script掌握这些条件渲染指令可以灵活控制 Vue 应用的 UI 状态提升用户体验和性能。