Vue 條件渲染 v-if 如何使用?與 v-show 有什麼差別?

假設網頁中有一個情境是不同的條件顯示不同的區塊,像是非登入狀態顯示登入與註冊連結、登入狀態顯示登出連結,類似這種情境怎麼做到?以 Vue 來說,此時就能使用條件渲染 v-if、v-show 等指令。

v-if 與 v-else

以上述的情境,我們先來段範例:

HTML

1
2
3
4
5
6
7
8
9
<div id="app">
<ul class="menu" v-if="is_login">
<li><a href="#">登出</a></li>
</ul>
<ul class="menu" v-else>
<li><a href="#">登入</a></li>
<li><a href="#">註冊</a></li>
</ul>
</div>

JavaScript

1
2
3
4
5
6
7
const app = {
data() {
return {
is_login: true;
}
}
}

範例解說

以這段範例來說,有兩個 ul 選單,我們希望在一個狀態之下只顯示一個 ul 選單,以 Vue 來說我們只要針對這兩個 ul 區塊設定 v-if、v-else 條件渲染語法。

基本上就跟程式語言的 if…else… 用法一樣,在 v-if 設定條件式,因此我們將 data 中 is_login 帶入,假設為 true 代表為登入狀態,即顯示登出那個 ul 區塊,反之為 false 就顯示 v-else 區塊。

v-else-if

跟一般程式語言一樣,如果需要多條件判斷,可使用 v-else-if 這段指令。假設呈現不同會員等級就很適合使用。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<div v-if="member_level == '管理員'">
<p>您擁有最高管理權限</p>
</div>
<div v-else-if="member_level == '編輯'">
<p>您擁有新增文章權限</p>
</div>
<div v-else-if="member_level == '會員'">
<p>您擁有回復文章權限</p>
</div>
<div v-else>
<p>您擁有觀看文章權限</p>
</div>
</div>

JavaScript

1
2
3
4
5
6
7
const app = {
data() {
return {
member_level: '編輯'
}
}
}

範例解說

這個範例總共分成管理員、編輯、一般會員以及沒有註冊的訪客,我們將條件式直接填入 v-if 與 v-else-if,當達成指定條件後,顯示該區塊。

v-if 與 v-show 的差別是什麼

v-if

基本上 v-if 與 v-else 狀態切換的改變,會是直接開啟、關閉其生命週期,所以如過透過像是按鈕切換等功能切換 v-if 與 v-else 區塊,原本顯示的區塊會在原始碼消失,顯示新區塊。

v-show

使用這個指令基本上跟 v-if 差不多(不過剛剛稍微測試,v-else-show 似乎不能運作?大家可以動手測試看看 XD),不過切換狀態時,原本顯示的區塊如果被替換,會透過 CSS display: none; 來隱藏區塊,而不會動到生命週期。