v-show显示隐藏
v-show 用于基于条件切换元素的可见性。
基本用法
HTML
<h1 v-show="isVisible">显示或隐藏</h1>
当 isVisible 为 false 时，元素仍然存在于 DOM 中，仅 CSS display 被设为 none。
v-show 与 v-if 对比
| 特性 | v-show | v-if |
|---|---|---|
| 渲染机制 | 始终渲染，切换 CSS display | 条件为真才渲染，销毁/重建 |
| 切换开销 | 小 | 大 |
| 初始渲染开销 | 大 | 小 |
| 不支持 template | 是 | 否 |
| 不支持 v-else | 是 | 否 |
适用场景
HTML
<!-- 频繁切换用 v-show -->
<div v-show="isMenuOpen">菜单内容</div>
<!-- 条件很少改变用 v-if -->
<div v-if="user.isAdmin">管理员面板</div>
v-show 不支持
<template>元素，也不支持v-else。
要点总结
v-show通过 CSSdisplay切换元素可见性- 元素始终存在于 DOM 中
- 适合频繁切换的场景
- 不支持
<template>和v-else
📝 发现内容有误？点击此处直接编辑