v-show

阅读24189

更新时间2025-08-22

v-if 条件语句

v-for 循环语句

`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"。

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

Vue 练习

通过练习测试自己

练习题:

填写缺失的部分，以便 Vue 根据"lightOn"布尔数据属性为我们切换下面 <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>

v-if 条件语句

v-for 循环语句

RELATED VIDEOS