使用 Vue.js 的条件指令

根据条件显示或隐藏元素的能力是任何前端框架的基本特征,Vue.js为我们提供了一套核心指令来实现这一效果:v-if,v-else,v-else-if和v-show。

在开始使用 Vue.js Hello World应用程序后,我们可以使用JavaScript数据对象的值来条件控制视图,例如,我们将看到如何使用下面提供的简单数据对象。

1data() {
2  return {
3    msg: "Hello World!",
4    isLoggedIn: false
5  }
6}

五、如果

v-if 指令根据给定的表达式添加或删除 DOM 元素。

我们可以从数据模型中使用isLoggedIn属性,并在视图中显示登录按钮。

1<button v-if="isLoggedIn">Logout</button>

现在,按钮不会显示,因为 isLoggedIn 设置为 false. 将 data.isLoggedIn 值设置为 true 会将按钮添加到 DOM。

v-if 指令只能显示或隐藏一个元素(以及其子元素),但您也可以通过单个 v-if 来控制多个元素以减少重复。

要做到这一点,您需要将所有应该由此条件控制的元素包装到一个 < 模板> 元素中. 模板元素本身不会被添加到 DOM. 但所有包含的元素将根据 v-if 表达式添加或删除。

例如,如果您需要显示标签和按钮,当isLoggedIn是真实的,则可以将两个元素包装成单个模板元素,如下所示。

1<template v-if="isLoggedIn">
2  <label> Logout </button>
3  <button> Logout </button>
4</template>

正如 v-else 名称所暗示的那样,本指令仅在与 v-if 相邻的表达式解决为 false 时使用来显示内容。

我们可以有一个登录按钮,自动显示isLoggedIn是假的。

1<button v-if="isLoggedIn"> Logout </button>
2<button v-else> Log In </button>

v-else 不需要给它传递一个值,但它必须在一个包含 v-if 或 v-else-if 指令的元素之后的元素中。

v-else-if 可以用来当我们需要检查两个以上的选项时,这将确保链中仅有一条链链的物品是可见的。

例如,如果名为isLoginDisabled的属性是真实的,我们可以防止登录按钮显示,而不是显示标签。

1<button v-if="isLoggedIn"> Logout </button>
2<label v-else-if="isLoginDisabled"> Register disabled </label>
3<button v-else> Log In </button>

与v-if非常相似,v-show指令也可以用来显示和隐藏基于表达式的元素。

两者的主要区别在于,

通常,v-show 如果元素频繁打开和关闭,则具有性能优势,而v-if 在初始渲染时间方面具有优势。