条件渲染 v-if 与 v-show
条件渲染两个指令：v-if 是「真删除/重建」元素，切换时走组件的销毁与创建；v-show 只是切 display: none，元素始终在 DOM 里。
选择标准：频繁切换用 v-show（初始化开销高但切换便宜）；条件很少变化用 v-if（不渲染时零开销）。注意 v-if 与 v-for 不要写在同一元素上——v-if 优先级更高导致逻辑混乱，用计算属性先过滤数据。
- v-if：元素真正销毁/重建，适合低频切换
- v-show：只切 display，适合频繁切换（如 Tab 面板）
- v-if 与 v-for 禁止同元素混用，用 computed 先过滤
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>条件渲染</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <style> .tab { display: inline-block; padding: 8px 16px; border: 1px solid #42b883; cursor: pointer; } .tab.on { background: #42b883; color: #fff; } .panel { border: 1px solid #ddd; padding: 16px; margin-top: 8px; } </style> </head> <body> <div id="app"> <!-- Tab 频繁切换：用 v-show --> <span class="tab" :class="{ on: tab === 1 }" @click="tab = 1">详情</span> <span class="tab" :class="{ on: tab === 2 }" @click="tab = 2">评论</span> <div class="panel" v-show="tab === 1">详情内容</div> <div class="panel" v-show="tab === 2">评论内容</div> <!-- 登录态低频变化：用 v-if --> <p v-if="!logined">未登录 <button @click="logined = true">登录</button></p> <p v-else>欢迎回来 <button @click="logined = false">退出</button></p> </div> <script> const { createApp, ref } = Vue; createApp({ setup() { return { tab: 1, logined: false }; } }).mount('#app'); </script> </body> </html>
本节要点频繁切换 v-show（只切显隐），低频条件 v-if（真删真建）；两者不可混用于同一元素。
