Vue.js基础-03-条件语句（v-if/v-show）

2023-10-07 14:47:52

Vue.js 条件语句：揭开 v-if 和 v-show 的秘密

当我们打造动态、交互式用户界面时，条件语句在 Vue.js 中扮演着至关重要的角色。它们允许我们根据特定条件有选择地显示或隐藏元素，从而为用户提供个性化的体验。在本文中，我们将深入探讨两种主要类型的 Vue.js 条件语句：v-if 和 v-show，揭开它们之间的关键区别以及在不同场景下的最佳用法。

v-if：优雅地切换元素的命运

想象一下，你想创建一个交互式按钮，当用户点击时显示一条欢迎信息。这就是 v-if 指令的用武之地。它就像一个逻辑闸门，根据条件切换元素的可见性。如果条件为 true，元素就会出现在用户面前；如果条件为 false，它就会从 DOM 中消失，就像变魔术一样。

语法：

<div v-if="condition"></div>

示例：

<p v-if="isVisible">欢迎来到我的网站！</p>

在上面的示例中，如果 isVisible 的值为 true，元素

将被渲染到 DOM 中，向用户显示欢迎信息。否则，它将从页面中移除，保持页面整洁。

v-show：隐藏元素，而不移除它们

v-show 指令与 v-if 类似，但也有一些微妙的区别。它仍然根据条件切换元素的可见性，但它并不会从 DOM 中移除元素。相反，它只是将元素隐藏起来，就像盖上了一块隐形布。

语法：

<div v-show="condition"></div>

示例：

<p v-show="isVisible">欢迎来到我的网站！</p>

在这种情况下，即使 isVisible 的值为 false，元素

仍然存在于 DOM 中，只是它被隐藏了。这对于某些场景很有用，例如当我们需要保留元素以备将来使用或出于 SEO 考虑时。

v-if vs. v-show：一场性能与灵活性的大战

虽然 v-if 和 v-show 都可以切换元素的可见性，但它们在性能、SEO 和复杂性方面表现不同：

性能： v-if 的性能通常优于 v-show，因为它不需要在 DOM 中保留元素。
SEO： v-if 会从 DOM 中移除元素，而 v-show 不会。这可能会影响搜索引擎对页面的可见性。
复杂性： v-if 允许我们使用 JavaScript 表达式来控制条件，而 v-show 只能使用布尔值。

何时选择 v-if 或 v-show

明智地选择正确的指令对于创建高效、动态的用户界面至关重要。一般来说：

使用 v-if： 当需要频繁切换元素的可见性，或需要从 DOM 中移除元素时。
使用 v-show： 当需要在 DOM 中保留元素，但根据条件隐藏或显示元素时。

代码示例：

// v-if
<template>
  <div>
    <p v-if="show">这是可见的</p>
  </div>
</template>

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

// v-show
<template>
  <div>
    <p v-show="show">这是可见的</p>
  </div>
</template>

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