Vue v-if 指令
使用 v-if 指令在 Vue 中根据条件创建 HTML 元素比使用纯 JavaScript 更容易。
在 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-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')">文本包含单词 'pizza'</p>
<p v-else>在文本中没有找到单词 'pizza'</p>
</div>
data() {
return {
text: '我喜欢 taco、pizza、泰国牛肉沙拉、越南河粉和塔吉锅。'
}
}
自己试一试 »
上面的例子可以扩展到说明 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: '我喜欢炸玉米饼、披萨、泰国牛肉沙拉、河粉汤和塔吉锅。'
}
}
})
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: '我喜欢炸玉米饼、披萨、泰国牛肉沙拉、河粉汤和塔吉锅。'
}
}
})
app.mount('#app')
</script>
自己试一试 »
使用 Vue，我们可以用比传统 JavaScript 更轻松的方式编写代码，根据特定条件创建元素。
