Vue v-if 指令
在 Vue 中，根据条件创建 HTML 元素比使用纯 JavaScript 要容易得多，多亏了 v-if 指令。
在 Vue 中，您只需在要根据条件创建的 HTML 元素中直接编写 if 语句。就是这么简单。
Vue 中的条件渲染
条件渲染在 Vue 中是通过使用 v-if、v-else-if 和 v-else 指令来实现的。
条件渲染是指仅当条件为真时才创建 HTML 元素，例如，如果变量为“true”，则创建文本“有货”，如果该变量为“false”，则创建“无货”。
Vue 中的条件
条件，或称“if 语句”，是指那些为 true 或 false 的内容。
条件通常是两个值之间的比较检查，就像上面的例子一样，用于检查一个值是否大于另一个值。
我们使用比较运算符，如
<、>=或!==来执行此类检查。比较检查也可以与逻辑运算符结合使用，例如
&&或||。请访问我们的 JavaScript 教程页面，了解更多关于 JavaScript 比较的信息。
我们可以使用库存中的打字机数量，通过比较检查来决定是否有货
示例
使用比较检查来决定是显示“有货”还是“无货”，这取决于库存中的打字机数量。
<p v-if="typewriterCount > 0">
有货
</p>
<p v-else>
无货
</p>
自己动手试一试 »
条件渲染指令
本概述描述了用于条件渲染的不同 Vue 指令是如何协同工作的。
| 指令 | 详情 |
|---|---|
v-if |
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>
自己动手试一试 »
使用函数的返回值
除了使用 v-if 指令进行比较检查外，我们还可以使用函数返回的“true”或“false”值
示例
如果某个文本包含“pizza”一词，则创建一个带有适当消息的 <p> 标签。'includes()' 方法是 JavaScript 的一个原生方法，用于检查文本是否包含特定单词。
<div id="app">
<p v-if="text.includes('pizza')">文本包含“pizza”一词</p>
<p v-else>文本中未找到“pizza”一词</p>
</div>
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
自己动手试一试 »
上面的示例可以扩展，以显示 v-if 也可以创建其他标签，例如 <div> 和 <img> 标签
示例
如果某个文本包含“pizza”一词，则创建一个带有披萨图片的 <div> 标签和一个带有消息的 <p> 标签。'includes()' 方法是 JavaScript 的一个原生方法，用于检查文本是否包含特定单词。
<div id="app">
<div v-if="text.includes('pizza')">
<p>文本包含“pizza”一词</p>
<img src="img_pizza.svg">
</div>
<p v-else>文本中未找到“pizza”一词</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>文本包含“pizza”一词</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>文本包含“burrito”一词，但不包含“pizza”</p>
<img src="img_burrito.svg">
</div>
<p v-else>文本中未找到“pizza”或“burrito”一词</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 更轻松地编写代码来根据特定条件创建元素。
