Level 1:綁定一個屬性

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

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

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

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

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

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

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

此外,我們也可以將 Style 額外寫成一個變數(物件格式)再綁定使用,例如:

<div id="app">
  <div class="box" :style="styleObject"></div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      styleObject: {
        backgroundColor: 'red',
        borderWidth: '5px',
      },
    },
  });
</script>

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

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

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

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

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

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

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

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

範例:

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

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

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

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

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

  • 陣列中的字串 'example-class1, example-class2' 是直接用 v-bind 加入的 Class
  • 接著是一個陣列,這是三元表達式的 v-bind (Level 4)
  • 最後還有一個物件格式的條件判斷 v-bind (Level 3)
<div
  @click="clicked = !clicked"
  :class="['example-class1 example-class2',
  [clicked? 'text-primary': 'text-grey'],
  {'bg-white': clicked}]"
>
  <span>條件一:如果點選這個 div,文字會變為主色,否則顯示灰色</span>
  <span>條件二:如果點選這個 div,背景會變為白色</span>
</div>

總結

v-bind 除了可以綁定 class、style 等屬性,也能綁定其他屬性,像是使用 UI 框架可能會出現 color、size 等官方給定的屬性。
不過在做這些綁定時,要注意屬性接收的值是什麼類別,如果要求的是 String,就需要把 []{} 拿掉,讓後面的值符合該型別,否則就會報錯哩。

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

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