根据条件显示或隐藏元素的能力是任何前端框架的基本特征,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 表演
与v-if非常相似,v-show指令也可以用来显示和隐藏基于表达式的元素。
两者的主要区别在于,
- v-if - 仅在表达式通过时将元素渲染到 DOM
- v-show - 将所有元素渲染到 DOM,然后使用 CSS display 属性来隐藏元素
- v-show - 不支持 v-else, v-else-if
通常,v-show 如果元素频繁打开和关闭,则具有性能优势,而v-if 在初始渲染时间方面具有优势。