Vue 初心者筆記 #2 常用指令 v-bind、v-for、v-if、v-show 介紹

本篇會介紹 v-bindv-forv-ifv-show 這幾個 Vue 指令語法,我們在製作 Vue 的專案時,這幾個語法還滿常用到的。

1. 使用 v-bind 動態綁定屬性

v-bind 這個指令可以幫 HTML 標籤的屬性動態綁定一個值,讓資料可以直接反應在 HTML 屬性上。
例如:我把在 data 裡面的 imgSrc 這個變數,綁定在 <img> 標籤的 src 屬性上,這個時候 <img> 標籤就可以使用這個圖片網址的變數。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<img v-bind:src="imgSrc" />
</div>

<script>
var app = new Vue({
el: '#app',
data: {
imgSrc: 'https://images.unsplash.com/photo',
},
});
</script>

以上程式碼的渲染結果,其實就等同於 <img src="https://images.unsplash.com/photo" alt="" />,而且我們這個圖片網址是可以隨著變數更換的呢!

綁定 Class

實務上,v-bind 最常使用的情境是動態綁定 HTML 標籤裡的 class 這個屬性。
例如:我們使用 v-bind 把調整圖片大小的 Class 名稱 img-fluid 綁定上去,讓圖片可以符合網頁大小。

這個 img-fluid 的 Class 是 Bootstrap 4 的語法,沒有使用過也沒關係,總之它是個可以讓圖片的寬度限制在 100% 寬以內的語法

範例程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<img v-bind:src="imgSrc" v-bind:class="className" />
</div>

<script>
var app = new Vue({
el: '#app',
data: {
imgSrc:
'https://images.unsplash.com/photo-1479568933336-ea01829af8de?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9926ef56492b20aea8508ed32ec6030&auto=format&fit=crop&w=2250&q=80',
className: 'img-fluid',
},
});
</script>

2. v-for 迴圈

在 Vue 裡面想使用 for 迴圈的話,可以使用 v-for 這個指令。

例如:假設有個 JSON 格式的資料 list,我們想要以 for 迴圈的方式撈出資料並呈現的話,可以在 li 標籤上使用 v-for 來完成。

在撰寫 v-for 這個指令時,我們會使用一個變數(這邊就取名為 item),然後將它 in 到一個 陣列 之中,來把 list 陣列的值一個個取出,並存到 item 這個變數上,取出之後就能透過點存取的方式,將資料呈現出來了。

1
2
3
4
5
<div id="app">
<ul>
<li v-for="item in list">{{ item.name }} 年齡是 {{ item.age }} 歲</li>
</ul>
</div>

為 v-for 加上索引值 (index)

上述例子中,如果想要知道某個 li 在陣列中是第幾個(索引值),可以把寫法改為 (item, index) 的形式,前面的是 item 的值,後面的是 item 的索引值。

1
2
3
4
5
6
7
<div id="app">
<ul>
<li v-for="(item, index) in list">
{{ index + 1 }} {{ item.name }} 年齡是 {{ item.age }} 歲
</li>
</ul>
</div>

3. v-if 條件判斷

v-if 通常會與 v-for 迴圈做搭配使用,為迴圈加上條件判斷式。
例如:只顯示年齡小於 25 歲的人,可透過 v-if="item.age < 25" 來篩選,當 item.age 小於 25 的時候,那個項目才會符合條件而呈現在大括號內。

1
2
3
4
5
6
7
<div id="app">
<ul>
<li v-for="(item, index) in list" v-if="item.age < 25">
{{ index+1 }} {{ item.name }} 年齡是 {{ item.age }} 歲
</li>
</ul>
</div>

不過官方並不建議 v-ifv-for 在同個標籤中一起使用,建議分開撰寫,例如:

1
2
3
4
5
6
7
<div id="app">
<ul>
<li v-for="(item, index) in list">
<span v-if="item.age < 25">{{ index+1 }} {{ item.name }} 年齡是 {{ item.age }} 歲</span>
</li>
</ul>
</div>

切換物件呈現

上方有 v-if 的時候,下方緊鄰的元素可以直接使用 v-else 來做出切換物件的效果。
例如:透過 Checkbox 勾選產生的 true/false 來做「條件判斷」,讓物件一次只會顯示出一個。

一個是 v-iftrue 時顯示
一個是 v-iffalse 時顯示

1
2
3
4
5
<input type="checkbox" id="isSuccess" v-model="isSuccess" />
<label for="isSuccess">切換物件</label>

<div v-if="isSuccess === true">成功!</div>
<div v-if="isSuccess === false">失敗!</div>

"isSuccess === true" 也可寫成 "isSuccess" > "isSuccess === false" 也可寫成 "!isSuccess"

template 標籤

template 標籤用於切換多數 DOM 元素的呈現。通常使用於需要使用 Vue 的指令,但不希望標籤被輸出的時候。

template 上使用 v-if,與在每個元素上設定 v-if 呈現的畫面都一樣。但是如果有很多個,改用 template 比較好,因為 template 標籤可使用 Vue 的指令,但不會被渲染出來。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template v-if="showTemplate">
<tr>
<td>1</td>
<td>小美</td>
</tr>
<tr>
<td>2</td>
<td>昊昊</td>
</tr>
</template>

<input type="checkbox" id="showTemplate" v-model="showTemplate" />
<label for="showTemplate">啟用元素狀態</label>

3. v-show 隱藏元素

v-show 是透過新增或移除 display: none; 這個 CSS 樣式語法的原理,去切換是否顯示某一個元素。因為是 display: none;,所以這個元素消失後其實還是存在的,只是被隱藏掉而已。
v-if 則是會移除被切換掉的 DOM 元素,因此一次只會顯示一個 DOM 元素。

通常這兩種使用的取捨,會在於畫面上的元素是否要消失,如果要保留就使用 v-show,這樣下次就不必再花時間取得元素哩。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。