如何用 Vue 模板语法实现条件渲染？复杂逻辑下的 v-if 嵌套指南

林译川

2026-11-05 • 👁 0人浏览过

Vue条件渲染主要用v-if/v-else-if/v-else实现真正的条件编译，适合开销大或无需保留状态的场景；v-show仅切换display，适合频繁切换；复杂逻辑应提取至computed，模板保持简洁；v-if切换会销毁组件，需保留状态时用v-show或keep-alive。 Vue 中条件渲染主要靠

v-if

、

v-else-if

和

v-else

，它们根据表达式的真假值动态插入或移除 DOM 元素。相比

v-show

（仅切换 CSS 的

display

），

v-if

是真正的条件编译——条件为假时，对应节点不会被渲染到 DOM 中，适合控制开销较大或无需保留状态的分支。基础用法：单条件与多分支最常用的是三者配合使用，形成类似 JavaScript 中

if...else if...else

的结构：

v-if

必须存在，绑定一个返回布尔值的表达式（如

user.role === 'admin'

）

v-else-if

和

v-else

必须紧跟在

v-if

或另一个

v-else-if

后面，否则会失效每个分支是独立的 DOM 块，互斥渲染；不满足任一分支时，整个区域不渲染示例：

加载中...
请求失败，请重试
{{ data.name }}
暂无数据

避免过度嵌套：用计算属性简化判断逻辑当条件涉及多个变量、复杂运算或重复判断时，直接写在模板里会让代码难读、难维护，也容易出错。推荐把判断逻辑提取到

computed

中：立即学习 “ 前端免费学习笔记（深入） ”；将多个字段组合（如

user.permissions

route.meta.requiresAuth

）封装成一个语义化字段，如

canAccessDashboard

计算属性自动响应依赖变化，且可复用、可测试模板中只保留清晰的布尔判断，比如

v-if="canAccessDashboard"

例如： Vue-router参考手册 Vue-router参考手册下载下载

computed: {
  canEditPost() {
    return this.user && 
           this.user.role === 'editor' && 
           this.post.status !== 'published' &&
           !this.isSubmitting
  }
}

模板中直接使用：

作用域与响应性注意事项

v-if

会触发局部编译，内部绑定的响应式数据仍有效，但有几点需留意：

v-if

切换时，内部组件会被销毁/重建，其生命周期钩子（如

mounted

、

beforeUnmount

）会触发，数据状态不保留若需保留状态（如表单输入、滚动位置），改用

v-show

，或用

缓存组件

v-if

不支持在

相关文章