Vue基础语法如何使用 v-if 和 v-show 条件渲染控制元素的显隐

v-if 和 v-show 机制不同：v-if 控制元素是否存在（条件为假时彻底移除 DOM），适合低频切换或初始不显示场景；v-show 仅控制 visibility（始终保留在 DOM 中），适合高频切换且需保留状态的场景。

v-if 和 v-show 都能控制元素是否显示，但机制完全不同：v-if 是“有没有”，v-show 是“看不看得见”。选错指令，小项目可能没感觉，大列表或高频切换时容易卡顿或白屏。

v-if：按需创建和销毁 DOM

条件为 true 时才渲染元素，为 false 时该元素彻底从 DOM 中移除，连带内部的事件监听、子组件、表单绑定状态都会被销毁。适合用在「几乎不切换」或「初始很可能不显示」的场景。

1. 支持链式判断：v-if + v-else-if + v-else，三者必须紧挨着写
2. 可作用于 <template> 标签，实现多元素批量条件渲染（<template> 自身不输出 DOM）
3. 惰性渲染：初始值为 false 时，内部模板完全不编译，节省首屏资源
4. 注意：不能和 v-for 写在同一元素上，需用 <template> 包裹再配 v-if

v-show：始终存在，只改 display

不管条件真假，元素一定出现在 DOM 中，只是通过 CSS 的 display: none 控制可见性。切换极快，但初始就占内存和渲染开销。

1. 不支持 <template>，也不能搭配 v-else 使用
2. 适合开关频繁的场景，比如模态框、折叠面板、标签页切换
3. 对表单元素要小心：v-show 隐藏后，input 的值仍保留在 DOM 中；v-if 移除后，值会丢失（除非你手动缓存）
4. 无法触发组件的 beforeUnmount / unmounted 生命周期，因为组件没被卸载

怎么选：看两个关键点

先问自己：这个元素会不会经常切？它第一次加载时大概率显还是隐？

1. 切换少、首次大概率不显 → 用 v-if（如权限按钮、错误提示、后台配置项）
2. 切换多、需要保留状态 → 用 v-show（如导航菜单、Tab 内容区、搜索建议浮层）
3. 不确定？优先 v-if，更符合直觉，也更节省资源

常见误用提醒

别把 v-show 用在需要权限拦截的敏感区域——DOM 还在，懂行的人 F12 就能看见；真正要隐藏数据，必须用 v-if 或服务端控制。另外，v-show 对 SVG 元素兼容性略差，某些属性（如 visibility）可能不如 display 可靠，复杂图表建议统一用 v-if。