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 更輕鬆地編寫程式碼來根據特定條件建立元素。
