Vue v-show 指令

条件可见性

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

在将 v-show 作为 HTML 属性编写后，我们必须提供一个条件来决定标签是否可见。

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

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> 元素。

<div id="app">
  <div id="lightDiv">
    <div ="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Switch light</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        lightOn: false
      }
    }
  })
  app.mount('#app')
</script>