🧭 Vue 条件渲染：v-if 与 v-show 的使用详解
在 Vue 开发中，条件渲染是一个非常基础且常用的特性。通过 v-if 和 v-show 指令，我们可以灵活控制 DOM 元素的显示与隐藏逻辑。
🧱 v-if —— 条件性地渲染元素
✅ 基本特点：
- 只在表达式为真值时才会渲染该元素。
- 支持链式结构：
v-else和v-else-if必须紧接在v-if或另一个v-else-if元素之后，否则不会被识别。 - 可用于
<template>标签上：这意味着你可以同时控制多个元素的显示，而最终渲染结果不会包含<template>这个标签
💡 使用示例：
<template v-if="isLoggedIn">
<h1>欢迎回来！</h1>
<p>您已成功登录。</p>
</template>
🎬 v-show —— 切换 CSS 的 display 属性
✅ 基本特点：
-
通过切换
display: none控制元素的可见性，元素始终存在于 DOM 中。 -
不支持
<template>标签。 -
性能对比：
v-if是“惰性”的，如果条件为假，元素不会被渲染，因此有更高的切换开销。v-show则是“懒惰程度较低”，无论条件真假都会渲染，只是控制显示状态，所以更适合频繁切换的场景
⚠️ 注意事项：不要混用 v-if 与 v-for
当 v-if 和 v-for 同时出现在一个元素上时：
v-if会优先于v-for执行- 不推荐在同一元素上同时使用这两个指令，因为这样会导致不必要的性能浪费或逻辑混乱。
❌ 不推荐写法：
<li v-for="item in items" v-if="item.isActive">{{ item.name }}</li>
✅ 推荐做法（使用 <template>）：
<template v-for="item in items">
<li v-if="item.isActive">{{ item.name }}</li>
</template>
📊 总结对比表
| 特性 | v-if | v-show |
|---|---|---|
| 渲染方式 | 条件渲染，元素可能不存在 | 通过 display 控制显示 |
| 初始开销 | 较低 | 较高 |
| 切换开销 | 较高 | 较低 |
支持 <template> | ✅ 是 | ❌ 否 |
🔚 结语
- 如果你希望按需渲染并节省资源，优先使用
v-if - 如果你需要频繁切换显示状态，推荐使用
v-show - 避免在同一元素上混用
v-if和v-for，保持代码清晰高效
