Vue3 v-show 指令
Vue3 内置指令v-show 指令用于根据表达式的真假值切换元素的可见性。它通过 CSS 的 display 属性来控制元素的显示与隐藏。
基本说明
v-show 指令根据绑定表达式的真假值来决定元素是否显示。无论条件为真还是为假，元素都会渲染到 DOM 中，只是通过 CSS 控制其可见性。
- 期望类型: any
- 作用: 根据表达式的真假值切换元素的可见性，通过 CSS display 属性控制。
v-show 与 v-if 的区别
| 特性 | v-show | v-if |
|---|---|---|
| 渲染方式 | 始终渲染到 DOM，只是控制显示/隐藏 | 条件为真时渲染，为假时不渲染 |
| 切换性能 | 切换开销小（只改 CSS） | 切换开销大（需要创建/销毁元素） |
使用场景
1、频繁切换显示状态
当元素需要频繁显示/隐藏时，使用 v-show 性能更好：
实例
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>这是一个弹窗</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
<div>
<button @click="showModal = true">打开弹窗</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>这是一个弹窗</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>