v-if 和 v-else 在 Vue 中是如何工作的

Posted on by

Vue 模板带有各种简单的快捷方式来实现高级功能。其中一组是v-forand v-if。可以将这些语句添加到 HTML 标记中，以使您的页面更加动态。让我们看看它们是如何工作的。

v-if 在 Vue 中的工作原理#

v-if本质上是 Vue 的 if 语句。如果其中的语句是true，则将显示 HTML 标记。否则，它不会。例如，假设我们有以下 Vue 文件：

<template>
    <div class="my-div" v-if="totalParcels > 5">You have more than 5 items!</div>
</template>
<script>
export default {
    data() {
        return {
            totalParcels: 6
        }
    }
}
</script>

在我们的v-if中，我们检查数据项totalParcels是否超过 5。如果是，我们显示 div。在这种情况下，它是，所以div会出现。如果我们改成totalParcels4，这个div就会消失！

既然我们有v-if，我们也有v-else和v-else-if。

v-else 和 v-else-if 如何在 Vue 中工作#

在下面的示例中，我们检查了一些标准。如果totalParcels发生变化，我们现在可以向用户显示不同的内容。注意：如果我们使用v-elseand v-else-if，我们需要 av-if来配合它们。我们所有的 div 应该彼此相邻，如下所示。

<template>
    <div class="my-div" v-if="totalParcels == 0">You have no items.</div>
    <div class="my-div" v-else-if="totalParcels < 5">You have less than 5 items!</div>
    <div class="my-div" v-else="totalParcels > 5">You have  items!</div>
</template>
<script>
export default {
    data() {
        return {
            totalParcels: 6
        }
    }
}
</script>

如何使用 v-if 隐藏多个元素#

由于v-if需要附加到一个元素，使用相同的隐藏多个元素v-if需要我们在我们想要隐藏的所有元素周围放置一个包装器。如果你想用一个v-if语句隐藏多个元素，你有两种选择：

  • 将要隐藏或显示的元素包装在另一个 HTML 标记中，如<div>，并v-if在该元素上使用 。
  • 将要隐藏或显示的元素包裹在<template>标签中，该标签不会在 HTML 中呈现，但允许我们隐藏多个元素。

选项 1 在某些情况下有一些好处 – 但如果您不希望 HTML 被嵌套，使用<template>标签是您最好的选择。

v-show 与 v-if 的区别#

在 vue 中，我们还有一个属性叫做v-show. 它的工作原理几乎与v-if/v-else. 不同之处在于，如果语句为 false v-if，则 HTML 标记完全消失。v-if使用时，如果语句为 false，v-show则 HTML 元素设置为display: none;，因此 HTML 仍将存在于页面上。这在某些特定情况下很有用。

<template>
    <!-- if totalParcels doesn't equal 0, then the div will still render in the HTML, but it will not display on the page. -->
    <div class="my-div" v-show="totalParcels == 0">You have no items.</div>
</template>

如您所见，v-if当我们更改数据并希望在我们的应用程序中通知用户这些更改时，它的版本变得非常有用。如果您想了解更多关于 Vue 的信息，可以在此处查看更多 Vue 内容。

推荐阅读：