Vue v-show 指令
了解如何使用 v-show 使元素可见或不可见。
v-show 易于使用，因为条件直接写在 HTML 标签的属性中。
条件可见性
当条件为 'false' 时，v-show 指令通过将 CSS 'display' 属性值设置为 'none' 来隐藏元素。
在将 v-show 编写为 HTML 属性后，我们必须提供一个条件来决定是否显示该标签。
语法
<div v-show="showDiv">这个 div 标签可以隐藏</div>
在上面的代码中，'showDiv' 代表一个布尔值的 Vue 数据属性，其属性值可以是 'true' 或 'false'。如果 'showDiv' 是 'true'，则显示 div 标签，如果它是 'false'，则不显示该标签。
示例
仅当 showDiv 属性设置为 'true' 时显示 <div> 元素。
<div id="app">
<div v-show="showDiv">这个 div 标签可以隐藏</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
v-show 与 v-if 对比
v-show 和 v-if 的区别在于，v-if 根据条件创建（渲染）元素，但使用 v-show 时，元素已创建，v-show 只改变其可见性。
因此，当切换对象的可见性时，最好使用 v-show，因为它对浏览器来说更容易处理，并且可以带来更快的响应和更好的用户体验。
使用 v-if 而不是 v-show 的一个原因是，v-if 可以与 v-else-if 和 v-else 一起使用。
在下面的示例中，v-show 和 v-if 分别应用于两个不同的 <div> 元素，但基于相同的 Vue 属性。您可以打开示例并检查代码，以看到 v-show 保留了 <div> 元素，仅将 CSS display 属性设置为 'none'，而 v-if 实际上销毁了 <div> 元素。
示例
仅当 showDiv 属性设置为 'true' 时显示两个 <div> 元素。如果 showDiv 属性设置为 'false'，并且我们使用浏览器检查示例页面，我们可以看到带有 v-if 的 <div> 元素被销毁了，而带有 v-show 的 <div> 元素则只是将 CSS display 属性设置为 'none'。
<div id="app">
<div v-show="showDiv">带有 v-show 的 Div 标签</div>
<div v-if="showDiv">带有 v-if 的 Div 标签</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
