Vue v-show 指令

了解如何使用 v-show 使元素可见或不可见。

v-show 很容易使用，因为条件直接写在 HTML 标记属性中。

条件可见性

当条件为 false 时，v-show 指令通过将 CSS 的 display 属性值设置为 none 来隐藏元素。

在将 v-show 编写为 HTML 属性之后，我们必须给出一个条件来决定标记是否可见。

语法

<div v-show="showDiv">This div tag can be hidden</div>

在上面的代码中，showDiv 表示布尔 Vue 数据属性，属性值为 true 或 false。如果 showDiv 为 true，则显示 div 标记，如果为 false，则不显示标记。

实例

仅当 showDiv 属性设置为 true 时，才显示 div 元素。

<div id="app">
  <div v-show="showDiv">This div tag can be hidden</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-show 上使用 v-if 的一个原因是 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 显示属性仅设置为 none。

<div id="app">
  <div v-show="showDiv">Div tag with v-show</div>
  <div v-if="showDiv">Div tag with v-if</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>