使用条件呈现

  • 2 分钟

使用数据驱动的应用程序时，通常需要具备根据某些值更新显示内容的能力。 可能需要更改颜色以指示警告、停用不可用的选项或不显示控件。 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，并跳过后面三行的评估。