Vue v-if 指令

使用 v-if 指令在 Vue 中根據(jù)條件創(chuàng)建 HTML 元素比使用純 JavaScript 要容易得多。

使用 Vue，您只需在要有條件創(chuàng)建的 HTML 元素中直接編寫 if 語句即可。就這么簡(jiǎn)單。

Vue 中的條件渲染

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

條件渲染是指僅當(dāng)條件為真時(shí)才創(chuàng)建 HTML 元素，即如果變量為“true”，則創(chuàng)建文本“有貨”，如果變量為“false”，則創(chuàng)建文本“無貨”。

示例

根據(jù)是否有任何打字機(jī)存貨編寫不同的消息：

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

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

Vue 中的條件

條件或“if 語句”是真或假的內(nèi)容。

條件通常是兩個(gè)值之間的比較檢查，如上例所示，以查看一個(gè)值是否大于另一個(gè)值。

我們使用比較運(yùn)算符（如 <、>= 或 !==）進(jìn)行此類檢查。

比較檢查還可以與邏輯運(yùn)算符（如 && 或 ||）結(jié)合使用。

我們可以使用存儲(chǔ)中的打字機(jī)數(shù)量和比較檢查來決定它們是否有貨：

示例

使用比較檢查根據(jù)存儲(chǔ)中的打字機(jī)數(shù)量決定是否寫入“有貨”或“缺貨”。

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

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

條件渲染指令

要查看包含上述所有三個(gè)指令的示例，我們可以使用 v-else-if 擴(kuò)展前面的示例，以便用戶看到“有貨”、“剩余很少！”或“缺貨”：

示例

使用比較檢查來決定是否根據(jù)存儲(chǔ)中的打字機(jī)數(shù)量寫入“有貨”、“剩余很少！”或“缺貨”。

<p v-if="typewriterCount>3">
有貨
</p>

<p v-else-if="typewriterCount>0">
剩余很少！
</p>

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

使用函數(shù)的返回值

我們可以使用函數(shù)的“true”或“false”返回值，而不是使用 v-if 指令的比較檢查：

示例

如果某個(gè)文本包含單詞“pizza”，則創(chuàng)建一個(gè)帶有適當(dāng)消息的 <p> 標(biāo)簽。 ‘includes()’ 方法是一種原生 JavaScript 方法，用于檢查文本是否包含某些單詞。

<div id="app">
<p v-if="text.includes('pizza')">文本包含單詞 'pizza'</p>
<p v-else>文本中未找到單詞 'pizza'</p>
</div>
data() {
return {
text: '我喜歡炸玉米餅、披薩、泰式牛肉沙拉、河粉湯和塔吉鍋。'
}
}

上述示例可以擴(kuò)展，以顯示 v-if 還可以創(chuàng)建其他標(biāo)簽，如 <div> 和 <img> 標(biāo)簽：

示例

如果某個(gè)文本包含單詞 ‘pizza’，則創(chuàng)建一個(gè)帶有披薩圖像的 <div> 標(biāo)簽和一個(gè)帶有消息的 <p> 標(biāo)簽。‘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>

下面的示例進(jìn)一步擴(kuò)展。

示例

如果某個(gè)文本包含單詞“pizza”或“burrito”或者不包含這些單詞，則會(huì)創(chuàng)建不同的圖像和文本。

<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，我們現(xiàn)在可以編寫在特定條件下創(chuàng)建元素的代碼，比使用傳統(tǒng) JavaScript 更容易。

為什么v-for優(yōu)先級(jí)更高？

Vue的設(shè)計(jì)者選擇讓 v-for 的優(yōu)先級(jí)高于 v-if，主要是為了符合直觀的邏輯和性能優(yōu)化的需要：

• 邏輯直觀：v-for 用于生成列表，而 v-if 用于條件篩選。先生成列表，再篩選符合條件的項(xiàng)，這種順序更符合人類的思維習(xí)慣。

• 性能優(yōu)化：如果先執(zhí)行 v-if，可能會(huì)導(dǎo)致不必要的循環(huán)計(jì)算，因?yàn)?v-if 的條件可能依賴于循環(huán)變量，而循環(huán)變量在 v-for 執(zhí)行后才可用。

總結(jié)

到此這篇關(guān)于前端必知必會(huì)之Vue v-if指令詳解的文章就介紹到這了,更多相關(guān)Vue v-if指令詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論