码农教程 - 一技在手,衣食无忧! tools

Vuev-show指令

❮ 上一节 下一节 ❯

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

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

有条件的可见性

这个v-show当条件为“false”时，指令通过将 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-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”，并且我们使用浏览器检查示例页面，我们可以看到 <div> 元素v-if被破坏，但 <div> 元素v-show刚刚将 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>

开始练习


❮ 上一节 下一节 ❯