在日常的前端开发里条件渲染几乎是每一个页面dou要面对的需求。Vue 为我们提供了两把“钥匙”：v‑if 与 v‑show。它们kan似相似，却在底层实现、性Neng表现以及使用场景上有着截然不同的差异。本文将从概念入手，结合真实代码片段，手把手带你弄清楚它们到底该怎么选，用对地方才会让页面跑得geng顺畅。

一、先说概念：两者到底干了什么？

v‑if当表达式返回 true 时Vue 会把对应的节点完整地挂到真实的 DOM 树里；返回 false 时这颗节点会被彻底抹除，连同它的子树一起消失。

v‑show不管表达式真假，这颗节点dou会被渲染，只是通过切换 CSS 的 display 属性来决定是否可见。换句话说它永远占据着一块 DOM 空间，只是“kan不见”。

这点差别决定了两者各自的黄金使用场景

频繁切换显示/隐藏——推荐使用 v‑show

条件切换不那么频繁，且希望尽量减少 DOM 节点——推荐使用 v‑if

二、实战代码：从Zui基础的登录切换说起 1️⃣ 用 v‑if / v‑else 实现登录 / 注销的互斥展示

下面这段示例演示了Zui常见的“Yi登录显示用户信息，未登录提示登录”的逻辑。注意：

v‑else 必须紧跟在前面的 v‑if/v‑else‑if 后面中间不Neng出现其他标签。