使用条件呈现
使用数据驱动的应用程序时,通常需要具备根据某些值更新显示内容的能力。 可能需要更改颜色以指示警告、停用不可用的选项或不显示控件。 Vue.js 提供了若干指令来控制是否显示项以及显示方式。
切换可见性
可使用 v-show
指令控制要显示的项。 v-show
检查一个布尔值或表达式,然后确定是否应显示某个组件。 如你所料,true
表示将显示它,而 false
表示不显示它。
以下示例显示了将 v-show
与计算结果为 true
或 false
的表达式一起使用:
<div v-show="new Date().getMonth() < 3">It is the first quarter</div>
备注
你可以在任何指令中或双括号 ({{ }}) 内使用有效的 JavaScript。
布尔逻辑
Vue.js 支持三种用于实现布尔逻辑的指令:v-if
、v-else-if
和 v-else
。 如你所料,这些指令完全符合传统的 if
、else if
和 else
语句。
<div v-if="new Date().getMonth() < 3">It is the first quarter</div>
<div v-else-if="new Date().getMonth() < 6">It is the second quarter</div>
<div v-else-if="new Date().getMonth() < 9">It is the third quarter</div>
<div v-else>It is the fourth quarter</div>
前面的示例之所以有效,是因为 if
指令的行为与 JavaScript 中的 if
块相同。 检测到 true
值时,将退出块。 因此,如果对于三月返回的月份是 2
(日历月份的计数从 0 开始),它将在第一行测试为 true
,并跳过后面三行的评估。