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

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-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，主要是为了符合直观的逻辑和性能优化的需要：

• 逻辑直观：v-for 用于生成列表，而 v-if 用于条件筛选。先生成列表，再筛选符合条件的项，这种顺序更符合人类的思维习惯。

• 性能优化：如果先执行 v-if，可能会导致不必要的循环计算，因为 v-if 的条件可能依赖于循环变量，而循环变量在 v-for 执行后才可用。

总结

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

最新评论