第一阶段：Vue 基础入门（第 7 天）

Vue 条件渲染：v-if、v-else-if、v-else 与 v-show 的区别

一、核心知识点

1. 条件渲染的概念

   通过数据状态的真假值，控制元素在 DOM 中的显示或隐藏。

2. v-if、v-else-if、v-else 的用法

   • v-if：根据表达式真假创建或销毁元素。

   • v-else-if ：作为 v-if 的连续条件分支。

   • v-else ：作为 v-if 或 v-else-if 的默认分支（无需表达式）。

   • 逻辑示例：

     <div v-if="score >= 90">优秀</div>
     <div v-else-if="score >= 60">及格</div>
     <div v-else>不及格</div>

3. v-show 的用法

   通过切换 CSS 的 display: none 控制元素的显隐（元素始终存在于 DOM 中）：

   <div v-show="isVisible">提示信息</div>

4. v-if vs v-show 的核心区别

   特性	v-if	v-show
   DOM 操作	动态创建/销毁元素	仅切换 display 属性
   初始渲染成本	初始为假时不渲染	无论真假都会渲染
   切换性能	适合不频繁切换的场景	适合频繁切换的场景
   生命周期	触发组件的创建/销毁钩子	不触发生命周期钩子
   <template>支持	支持	不支持

---

二、案例代码

1. 多条件分支渲染（v-if/v-else-if/v-else）

   <template>
     <div>
       <p v-if="score >= 90">成绩优秀！</p>
       <p v-else-if="score >= 70">良好</p>
       <p v-else-if="score >= 60">及格</p>
       <p v-else>需要努力哦</p>
     </div>
   </template>

2. 显隐控制（v-show）

   <template>
     <div>
       <button @click="toggle">切换提示</button>
       <p v-show="showTip">这是一个重要提示！</p>
     </div>
   </template>
   <script>
   export default {
     data() {
       return { showTip: true };
     },
     methods: {
       toggle() {
         this.showTip = !this.showTip;
       }
     }
   };
   </script>

3. 通过开发者工具观察 DOM

   • v-if 为假时：元素从 DOM 中完全移除。
   • v-show 为假时 ：元素保留但添加 style="display: none;"。

---

三、总结要点

1. 选择策略

   • 若元素需要频繁切换显隐 （如弹窗、选项卡），优先使用 v-show 避免重复渲染开销。
   • 若元素无需频繁切换 （如权限控制、静态条件分支），使用 v-if 减少初始 DOM 节点数。

2. 组合使用
   v-if 系列适合处理互斥逻辑分支 ，而 v-show 适合独立元素的显隐控制。例如：

   <div v-if="hasPermission">
     <admin-panel v-show="isPanelVisible"/>
   </div>

3. 注意事项
   v-else-if 和 v-else 必须紧跟在 v-if 或 v-else-if 元素之后，否则无法正确解析逻辑分支。