v-else-if 条件分支（否则如果）
最后更新：2026-10-22
v-else-if 条件分支（否则如果）
v-else-if 串联多个条件分支，依次判断直到某个条件为真。
| 分组 | 指令 |
|---|---|
| 类型 | 指令 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
<p v-if="t >= 90">优秀</p>
<p v-else-if="t >= 60">及格</p>
<p v-else>不及格</p>⚙️ 参数
| expression | 布尔表达式，按书写顺序短路求值 |
|---|
返回值：指令，无返回值
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
输入 75 显示「及格」，输入 95 显示「优秀」，输入 40 显示「不及格」。💡 要点
ℹ️ 说明 条件按书写顺序判断，一旦命中就停止——把最严格的条件排前面。
⚠️ 注意 同样必须紧跟 v-if / v-else-if，链不能被其他元素打断。
💡 提示 分支逻辑超过三条时，考虑改用计算属性返回状态，模板更干净。
🏷️ 相关指令
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q v-else-if 的判断顺序重要吗？
A 重要。自上而下短路判断，命中即停——把最严格的条件放最前面。
Q 分支太多会让模板很乱吗？
A 超过三条建议把状态收进计算属性，模板里只判断状态值。
Q v-else-if 能和 v-show 混用吗？
A 不行，分支链必须在 v-if 家族之间配对。
