本篇介紹如何透過 v-bind 指令來動態綁定屬性，這是很常用到的技巧喔，以下就來介紹各種 v-bind 綁定的用法吧！

Level 1：綁定一個屬性

v-bind 這個指令可以幫 HTML 標籤的屬性綁定值，讓資料可以直接反應在 HTML 屬性上。

例如：將 data 裡的 imgSrc 變數綁定在 img 標籤的 src 屬性上，這時候 img 標籤就可以使用這個圖片網址變數。

1<img v-bind:src="imgSrc" v-bind:style="{'backgroundColor': 'red'}" />
2<!-- :style="{'樣式屬性(駝峰式寫法)': '樣式的值'}" -->
3

在實務上 v-bind 很常用來綁定 class 這個屬性，像是把調整圖片大小的 Class 名稱 img-fluid 綁定上去，讓圖片可以符合網頁大小等等。

Level 2：用陣列加上多個 Class 或 Style

如果要加入多個 Class 或 Style，可以使用陣列的格式一次加入複數個。

1<button class="btn" :class="['btn-outline-primary', 'active']">按鈕</button>
2<div :style="[{'backgroundColor': 'red'}, {'borderWidth': '5px'}]">Box</div>
3

此外，我們也可以將 Style 額外寫成一個變數（物件格式）再綁定使用，例如：

1<div id="app">
2  <div class="box" :style="styleObject"></div>
3</div>
4
5<script>
6  var app = new Vue({
7    el: '#app',
8    data: {
9      styleObject: {
10        backgroundColor: 'red',
11        borderWidth: '5px',
12      },
13    },
14  });
15</script>
16

Level 3：根據某個條件來綁定 Class

使用 v-bind 搭配大括號，依照條件來判斷是否加入 Class，算是滿常用到的技巧 👀

1v-bind:class="{'要綁定的 ClassName': 加載條件(判斷式)}
2

例如：點擊 span 標籤後會把 clicked 這個值改為 true，此時因為滿足 v-bind 的條件，所以動態地加上 text-primary 這個 Class 讓文字變色。

1<span :class="{'text-primary': clicked}" @click="clicked = !clicked">
2  如果已點選，這段文字會變色。
3</span>
4

Level 4：使用三元表達式切換 Class

使用中括號，根據條件判斷的 true 或 false 來加載不同的 ClassName。

1v-bind:class="[加載條件(判斷式)? '結果為 true 的 Class': '結果為 false 的
2Class']"
3

範例：

1<span
2  :class="[clicked? 'text-primary': 'text-grey']"
3  @click="clicked = !clicked"
4>
5  如果點選這個標籤，文字會變為主色，否則顯示灰色。
6</span>
7

Level 5：結合陣列一次綁定多個條件

我們還可以使用陣列包住多個 v-bind 動態綁定的條件式。

1v-bind:class="[動態綁定 Class1, 動態綁定 Class2]"
2

下方範例中，一次用了三種不同的 v-bind 寫法，這些花式綁定通通包在一個陣列裡面。

• 陣列中的字串 'example-class1, example-class2' 是直接用 v-bind 加入的 Class
• 接著是一個陣列，這是三元表達式的 v-bind (Level 4)
• 最後還有一個物件格式的條件判斷 v-bind (Level 3)

1<div
2  @click="clicked = !clicked"
3  :class="['example-class1 example-class2',
4  [clicked? 'text-primary': 'text-grey'],
5  {'bg-white': clicked}]"
6>
7  <span>條件一：如果點選這個 div，文字會變為主色，否則顯示灰色</span>
8  <span>條件二：如果點選這個 div，背景會變為白色</span>
9</div>
10

總結

v-bind 除了可以綁定 class、style 等屬性，也能綁定其他屬性，像是使用 UI 框架可能會出現 color、size 等官方給定的屬性。

不過在做這些綁定時，要注意屬性接收的值是什麼類別，如果要求的是 String，就需要把 [] 或 {} 拿掉，讓後面的值符合該型別，否則就會報錯哩。

此外，雖然最後提到透過陣列，我們可以在裡面寫很多組動態綁定，但是這麼做其實會降低程式碼的可讀性。
如果真的需要綁定這麼多條件，建議使用 computed 來幫助解決，否則一次綁定這麼多，其實會讓這段程式碼變得太複雜，有時候 Code 寫得簡單好懂一些也是很重要的！

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