v-if/v-else-if/v-else 是 vue 3 多条件排他渲染指令，严格按顺序判断，仅渲染首个为真的分支；必须连写成链、不可中断；支持在 上批量控制；复杂逻辑应提取为计算属性。

v-if 和 v-else-if 是 Vue 3 中构建多条件分支渲染的核心指令，它们不是靠“优先级”起作用，而是严格按书写顺序依次判断、排他执行——只要某个条件为真，就渲染对应内容，其余分支完全不参与、也不生成 DOM。

v-if / v-else-if / v-else 必须成链，顺序不能错

这三者必须连在一起写，中间不能插入其他元素（哪怕是一个空格、注释或普通标签），否则链就断了，v-else-if 或 v-else 将失效甚至报错。

• v-if 必须是第一个，且必须带表达式
• v-else-if 可出现多次，每次都要紧跟在 v-if 或上一个 v-else-if 后面
• v-else 必须紧接在 v-if 或 v-else-if 后，且不能写表达式

多分支只渲染一个，哪怕多个条件同时为真

它模拟的是 JavaScript 的 if-else if-else 流程。例如：

优秀

及格

不及格

当 score 是 95，虽然也满足 >= 60，但只渲染第一个分支；后续条件根本不会被检查。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

用

想让一组同级元素整体显隐？直接在

已完成

复杂逻辑别堆在模板里

模板中避免写嵌套三元、长布尔表达式（如 v-if="user.role === 'admin' && user.status === 'active' && !user.locked"）。

• 推荐提取为计算属性：const isAuthorized = computed(() => user.role === 'admin' && user.status === 'active')
• 模板中只写 v-if="isAuthorized"，清晰、可复用、易测试

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！