揭秘Vue.js中的v-if和v-show指令，助你掌控元素显隐

2023-05-15 15:38:54

v-if 和 v-show：Vue.js 中控制元素显隐的利器

在构建交互式 web 应用程序时，动态控制元素的显示和隐藏至关重要。Vue.js 框架提供了两个功能强大的指令，v-if 和 v-show，可帮助你轻松实现这一目标。本文将深入探讨这两个指令，解释它们的异同，并通过一个真实的案例演示如何明智地使用它们。

揭开 v-if 指令的神秘面纱

v-if 指令堪称 Vue.js 中的点睛之笔，它允许你根据条件动态地显示或隐藏元素。当条件为真时，元素将出现在页面上；当条件为假时，元素将悄然消失。

<template>
  <div v-if="show">
    <h1>欢迎来到神奇的 Vue.js 世界！</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

在这个示例中，show 数据被设置为 true，满足了 v-if 指令的条件，因此元素显示在页面上。

v-show 指令的登场亮相

v-show 指令与 v-if 指令有着异曲同工之妙，同样可以控制元素的显示和隐藏。然而，这两个指令之间存在着微妙的差异。v-show 指令不会改变元素在 DOM 树中的位置，而是通过修改元素的 display 样式来控制其显隐。

<template>
  <div v-show="show">
    <h1>欢迎来到神奇的 Vue.js 世界！</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

与 v-if 指令不同，v-show 指令不会影响元素在 DOM 树中的位置。当 show 数据为 true 时，元素将显示出来；当 show 数据为 false 时，元素仍然存在于 DOM 树中，只不过被隐藏起来了。

v-if 与 v-show 指令的抉择时刻

既然 v-if 和 v-show 指令都能控制元素的显隐，那么我们该如何选择呢？这里有一个简单明了的原则：

使用 v-if 指令的时机： 当需要根据条件动态地添加或移除元素时，v-if 指令是你的不二之选。因为它不仅能控制元素的显示和隐藏，还能影响元素在 DOM 树中的位置。
使用 v-show 指令的时机： 当只需要控制元素的显示和隐藏，而不需要影响元素在 DOM 树中的位置时，v-show 指令就是你的最佳拍档。它比 v-if 指令更加轻量级，运行效率也更高。

案例实战：揭秘 v-if 和 v-show 指令的应用场景

为了加深对这两个指令的理解，让我们一起走进一个真实的案例。假设我们正在开发一个在线购物网站，需要在商品详情页中显示商品的详细信息。我们希望当用户点击“展开详情”按钮时，商品的详细信息才显示出来。

<template>
  <div>
    <button @click="showDetails = !showDetails">展开详情</button>
    <div v-if="showDetails">
      <h1>{{ product.name }}</h1>
      <p>{{ product.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetails: false,
      product: {
        name: 'iPhone 13 Pro Max',
        description: '苹果公司出品的智能手机，搭载 A15 仿生芯片，配备 120Hz 高刷屏，后置三摄，支持 5G 网络。'
      }
    }
  }
}
</script>

在这个示例中，我们使用了 v-if 指令来控制商品详细信息的显示和隐藏。当用户点击“展开详情”按钮时，showDetails 数据被切换为 true，v-if 指令的条件得到满足，商品详细信息随之显示出来。

如果我们使用 v-show 指令来实现同样的效果，代码如下：

<template>
  <div>
    <button @click="showDetails = !showDetails">展开详情</button>
    <div v-show="showDetails">
      <h1>{{ product.name }}</h1>
      <p>{{ product.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetails: false,
      product: {
        name: 'iPhone 13 Pro Max',
        description: '苹果公司出品的智能手机，搭载 A15 仿生芯片，配备 120Hz 高刷屏，后置三摄，支持 5G 网络。'
      }
    }
  }
}
</script>