Vue v-if 指令
Vue 中的条件
条件或"if 语句"是 true 或 false 的内容。
条件通常是两个值之间的比较检查，如上例所示，以查看一个值是否大于另一个值。
我们使用像
<,>=或!==这样的比较运算符来进行此类检查。比较检查还可以与逻辑运算符结合使用，例如
&&或||。请访问我们的 JavaScript 教程页面，了解有关 JavaScript 比较的更多信息。
我们可以使用存储中的打字机数量进行比较检查来确定它们是否有库存:
示例
根据库存打字机的数量，使用比较检查来决定是否写入"有库存"或"无库存"。
<p v-if="typewriterCount > 0">
in stock
</p>
<p v-else>
not in stock
</p>
亲自试一试 »
条件渲染指令
此概述介绍了如何一起使用用于条件渲染的不同 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 扩展前面的示例，以便用户看到 "有货"、"剩余很少！" 或"缺货":
示例
通过比较检查来决定是否写"有货"、"剩余很少！" 或"无库存"，具体取决于库存打字机的数量。
<p v-if="typewriterCount>3">
有货
</p>
<p v-else-if="typewriterCount>0">
剩余很少!
</p>
<p v-else>
缺货
</p>
亲自试一试 »
使用函数的返回值
我们可以使用函数的"true"或"false"返回值，而不是使用 v-if 指令进行比较检查:
示例
如果某个文本包含单词"pizza"，请创建一个包含适当消息的 <p> 标签。 "includes()"方法是一种原生 JavaScript 方法，用于检查文本是否包含某些单词。
<div id="app">
<p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
亲自试一试 »
上面的示例可以扩展以显示 v-if 还可以创建其他标签，例如 <div> 和 <img> 标签:
示例
如果某个文本包含"披萨"一词，请创建一个包含披萨图像的 <div> 标签和一个包含消息的 <p> 标签。 "includes()"方法是一种原生 JavaScript 方法，用于检查文本是否包含某些单词。
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
亲自试一试 »
下面的示例进一步扩展。
示例
如果某个文本包含"pizza"或"burrito"一词，或者不包含这些词，则会创建不同的图像和文本。
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img src="img_burrito.svg">
</div>
<p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
亲自试一试 »
使用 Vue，我们现在可以编写代码，以比传统 JavaScript 更简单的方式在特定条件下创建元素。
