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

發表於 分類於

本篇會介紹 v-bind、v-for、v-if、v-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-if 與 v-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-if 為 true 時顯示
一個是 v-if 為 false 時顯示

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，這樣下次就不必再花時間取得元素哩。

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