v-else是v-if/v-else-if的兜底分支，无表达式、不可单独使用，必须紧邻前置条件指令，用于二选一场景；与v-show不同，它实现真实DOM渲染切换。

v-else 用于承接 v-if 或 v-else-if 的“兜底分支”，当所有前置条件都不成立时才渲染对应内容。它不带表达式，只起逻辑收尾作用，且必须紧挨着 v-if 或 v-else-if 元素，中间不能插入其他标签或空白节点。

必须紧跟前一个条件指令

v-else 没有独立判断能力，它的存在完全依赖前面的 v-if 或 v-else-if。如果中间被其他元素隔开，Vue 将无法识别，直接报错或忽略该指令。

• ✅ 正确写法：v-if 和 v-else 相邻
• ❌ 错误写法：

  加载中...

  ---

  完成

  （

  ---

  隔开了两者）
• ⚠️ 注意：换行和缩进不算“间隔”，但注释、文本节点或任何 HTML 元素都会破坏链式关系

适用于二选一的简单场景

当只需要“满足条件 A 就显示 X，否则显示 Y”时，v-else 最简洁直观。比如权限控制、开关状态提示、表单步骤切换等。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 保存
• 编辑
• 用户登录后显示头像，未登录时显示“请登录”——这种非此即彼的 UI 切换，v-else 是首选

不能单独使用，也不能加表达式

v-else 不接受任何绑定值或 JavaScript 表达式。写成 v-else="count > 5" 或 v-else="false" 都是无效的，Vue 会静默忽略或抛出警告。

• 它隐含语义就是“其余所有情况”
• 若需多条件判断，请改用 v-else-if 链式组合，最后再接一个 v-else 作兜底
• 例如：状态为 'success' / 'error' / 其他 → 前两个用 v-if 和 v-else-if，第三个用 v-else

与 v-show 的关键区别要分清

v-else 配合 v-if 实现的是“真实条件渲染”：条件为假时，DOM 中完全不存在该元素；而 v-show 只是加 display: none。这意味着：

• v-if + v-else 触发组件创建/销毁，适合一次性判断（如路由权限、初始数据加载态）
• 频繁切换的场景（如折叠面板、Tab 标签）更适合 v-show，避免重复初始化开销
• 如果用了 v-else 却发现 DOM 节点还在，大概率是 v-if 条件始终为 true，或 v-else 写错了位置

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