v-show 指令控制元素的显示和隐藏,它会修改元素的 display 属性,在 true 时显示,在 false 时隐藏。与 v-if 不同,v-show 不会移除 DOM 中的元素。语法为 ,其中 condition 布尔值表达式决定元素的可见性。

v-show 在 Vue.js 中的作用
v-show 是 Vue.js 中的一个指令,用于控制元素的显示和隐藏。其作用如下:
功能
v-show 控制元素的 CSS display 属性:
立即学习“前端免费学习笔记(深入)”;
- 如果 v-show 为 true,则元素显示(display: block)。
- 如果 v-show 为 false,则元素隐藏(display: none)。
区别于 v-if
虽然 v-show 和 v-if 都有条件性地显示或隐藏元素,但它们的工作方式不同:
- v-show 仅影响元素的 display 属性,它不会移除 DOM 中的元素。
- v-if 会从 DOM 中移除元素,当 v-if 为 false 时,重新渲染时才会添加元素。
语法
其中:
- condition 是一个布尔值表达式,决定元素是否显示。
示例
这是显示的元素
在这个示例中,点击按钮会切换 show 的值。当 show 为 true 时,div 元素显示,否则隐藏。










