在 Vue.js 中,v-show 是一个指令,它用于根据条件切换元素的 CSS 属性 display。具体来说,当 v-show 的条件为 true 时,元素会被设置为 display: block(或其他相关的值,比如 inline、inline-block 等,取决于元素原本的 display 值),而当条件为 false 时,元素会被设置为 display: none。
与 v-if 不同,v-show 只是简单地切换 CSS 的 display 属性,而元素始终在 DOM 中。这意味着,即使元素不可见(即 v-show="false"),它仍然会占用页面上的空间(尽管是看不见的)。另一方面,v-if 则是根据条件完全添加或删除元素。
这里有一个简单的例子:
<template> <div> <button @click="toggle = !toggle">Toggle Visibility</button> <p v-show="toggle">This text will be visible or hidden based on the toggle value.</p> </div>
</template> <script>
export default { data() { return { toggle: true } }
}
</script>
在这个例子中,当你点击按钮时,toggle 的值会切换,导致 <p> 元素的可见性也相应切换。由于我们使用了 v-show,<p> 元素始终在 DOM 中,只是其可见性会变化。