条件或"if 语句"是 true 或 false 的内容。
条件通常是两个值之间的比较检查，如上例所示，以查看一个值是否大于另一个值。
我们使用像 <, >= 或 !== 这样的比较运算符来进行此类检查。
比较检查还可以与逻辑运算符结合使用，例如 && 或 ||。
请访问我们的 JavaScript 教程页面，了解有关 JavaScript 比较的更多信息。
我们可以使用存储中的打字机数量进行比较检查来确定它们是否有库存:
根据库存打字机的数量，使用比较检查来决定是否写入"有库存"或"无库存"。
in stock
not in stock
»此概述介绍了如何一起使用用于条件渲染的不同 Vue 指令。
| 指令 | 详细信息 |
|---|---|
v-if |
可以单独使用，也可以与 v-else-if 和/或 v-else 一起使用。 如果 v-if 内的条件为"true"，则不考虑 v-else-if 或 v-else。 |
v-else-if |
必须在 v-if 或另一个 v-else-if 之后使用。 如果 v-else-if 内的条件为"true"，则不考虑后面的 v-else-if 或 v-else。 |
v-else |
如果 if 语句的第一部分为 false，则这部分将会发生。 必须放置在 if 语句的最末尾，在 v-if 和 v-else-if 之后。 |
要查看包含上面显示的所有三个指令的示例，我们可以使用 v-else-if 扩展前面的示例，以便用户看到 "有货"、"剩余很少！" 或"缺货":
通过比较检查来决定是否写"有货"、"剩余很少！" 或"无库存"，具体取决于库存打字机的数量。
有货
剩余很少!
缺货
»我们可以使用函数的"true"或"false"返回值，而不是使用 v-if 指令进行比较检查:
如果某个文本包含单词"pizza"，请创建一个包含适当消息的
标签。 "includes()"方法是一种原生 JavaScript 方法，用于检查文本是否包含某些单词。
The text includes the word 'pizza'
The word 'pizza' is not found in the text
上面的示例可以扩展以显示 v-if 还可以创建其他标签，例如
如果某个文本包含"披萨"一词，请创建一个包含披萨图像的
标签。 "includes()"方法是一种原生 JavaScript 方法，用于检查文本是否包含某些单词。
The text includes the word 'pizza'
The word 'pizza' is not found in the text
下面的示例进一步扩展。
如果某个文本包含"pizza"或"burrito"一词，或者不包含这些词，则会创建不同的图像和文本。
The text includes the word 'pizza'
The text includes the word 'burrito', but not 'pizza'
The words 'pizza' or 'burrito' are not found in the text
使用 Vue，我们现在可以编写代码，以比传统 JavaScript 更简单的方式在特定条件下创建元素。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
