v-show

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 显示属性设置为"none"，但 v-if 实际上破坏了 <div> 元素。

示例

仅当 showDiv 属性设置为"true"时才显示两个 <div> 元素。 如果 showDiv 属性设置为"false"，并且我们使用浏览器检查示例页面，我们可以看到带有 v-if 的 <div> 元素被破坏，但带有 v-show 的 <div> 元素只是将 CSS 显示属性设置为"none"。

Vue 练习

<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>