vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue v-if指令详解

前端必知必会之Vue v-if指令详解

作者:编程岁月

这篇文章主要介绍了前端必知必会之Vue v-if指令的相关资料,Vue中的条件渲染指令v-if、v-else-if和v-else用于根据条件动态创建HTML元素,通过使用比较运算符和逻辑运算符,可以编写复杂的条件逻辑,需要的朋友可以参考下

Vue v-if 指令

使用 v-if 指令在 Vue 中根据条件创建 HTML 元素比使用纯 JavaScript 要容易得多。

使用 Vue,您只需在要有条件创建的 HTML 元素中直接编写 if 语句即可。就这么简单。

Vue 中的条件渲染

Vue 中的条件渲染是通过使用 v-if、v-else-if 和 v-else 指令完成的。

条件渲染是指仅当条件为真时才创建 HTML 元素,即如果变量为“true”,则创建文本“有货”,如果变量为“false”,则创建文本“无货”。

示例

根据是否有任何打字机存货编写不同的消息:

<p v-if="typewritersInStock">
有货
</p>

<p v-else>
缺货
</p>

Vue 中的条件

条件或“if 语句”是真或假的内容。

条件通常是两个值之间的比较检查,如上例所示,以查看一个值是否大于另一个值。

我们使用比较运算符(如 <、>= 或 !==)进行此类检查。

比较检查还可以与逻辑运算符(如 && 或 ||)结合使用。

我们可以使用存储中的打字机数量和比较检查来决定它们是否有货:

示例

使用比较检查根据存储中的打字机数量决定是否写入“有货”或“缺货”。

<p v-if="typewriterCount > 0">
有货
</p>

<p v-else>
缺货
</p>

条件渲染指令

指令详情
v-if可以单独使用,也可以与 v-else-if 和/或 v-else 一起使用。如果 v-if 中的条件为“真”,则不考虑 v-else-if 或 v-else。
v-else-if必须在 v-if 或另一个 v-else-if 之后使用。如果 v-else-if 中的条件为“真”,则不考虑后面的 v-else-if 或 v-else。
v-else如果 if 语句的第一部分为假,则会发生此部分。必须放在 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: '我喜欢炸玉米饼、披萨、泰式牛肉沙拉、河粉汤和塔吉锅。'
}
}

上述示例可以扩展,以显示 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: '我喜欢 taco、披萨、泰式牛肉沙拉、河粉汤和塔吉锅。'
}
}
})
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: '我喜欢 taco、披萨、泰式牛肉沙拉、越南河粉汤和塔吉锅。'
}
}
})
app.mount('#app')
</script>

使用 Vue,我们现在可以编写在特定条件下创建元素的代码,比使用传统 JavaScript 更容易。

为什么v-for优先级更高?

Vue的设计者选择让 v-for 的优先级高于 v-if,主要是为了符合直观的逻辑和性能优化的需要:

总结

到此这篇关于前端必知必会之Vue v-if指令详解的文章就介绍到这了,更多相关Vue v-if指令详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文