Vue學習v-if與v-else-if
- 一、前言
- 1、v-if
- 2、v-else-if
- 3、v-else
- 4、示例
一、前言
v-if 和 v-else-if 是 Vue.js 中用于條件渲染的指令，它們通常與 v-else 一起使用。下面我來詳細解釋一下它們的用法和區別：
1、v-if
- 用法：
v-if是一個指令，它接受一個表達式作為參數。當這個表達式的值為真時，它所在的元素會被渲染到 DOM 中，否則會從 DOM 中移除。 - 示例：
<div v-if="condition">條件為真時顯示的內容
</div>
2、v-else-if
- 用法：
v-else-if也是一個指令，用于在v-if的條件不滿足時，進一步檢查另一個條件。它接受一個表達式作為參數，當該表達式的值為真時，它所在的元素會被渲染到 DOM 中。 - 注意：
v-else-if必須緊跟在v-if或者另一個v-else-if后面。 - 示例：
<div v-if="condition1">條件1為真時顯示的內容
</div>
<div v-else-if="condition2">條件1不滿足，條件2為真時顯示的內容
</div>
3、v-else
- 用法：
v-else是一個指令，用于在v-if和v-else-if的條件都不滿足時，渲染一個默認的內容。它不需要接受任何參數。 - 注意：
v-else必須緊跟在v-if或者v-else-if后面，不能單獨使用。 - 示例：
<div v-if="condition1">條件1為真時顯示的內容
</div>
<div v-else-if="condition2">條件1不滿足，條件2為真時顯示的內容
</div>
<div v-else>條件1和條件2都不滿足時顯示的默認內容
</div>
4、示例
<div v-if="status === 'active'">用戶狀態：活躍
</div>
<div v-else-if="status === 'inactive'">用戶狀態：不活躍
</div>
<div v-else>用戶狀態：未知
</div>
在這個示例中，根據 status 的不同取值，會渲染不同的內容。如果 status 是 “active”，則顯示 “用戶狀態：活躍”，如果 status 是 “inactive”，則顯示 “用戶狀態：不活躍”，否則顯示 “用戶狀態：未知”。
)
