使用 v-bind 動態綁定各種屬性

發表於 分類於

Vue.js 有個基礎且使用頻率很高的語法叫做 v-bind，它可以用來動態綁定一個屬性的值，像是 :class 就是以某個條件來判斷切換 class。而除了以上寫法，其實 v-bind 還有其他更進階且實用的寫法，以下就來介紹幾個綁定的用法吧！

根據某個條件來綁定 Class

  • 依照條件來判斷是否加入 Class
  • 語法：:class="{'要綁定的 ClassName': 加載條件(判斷式)}"
  • 使用大括號

例如：
我們在 data 新增 clicked 並將它的值預設為 false，當我們點擊 <span> 標籤後，會把這個值改為 true。此時由於滿足 v-bind 的條件，因此會動態加上 text-primary 這個 ClassName，使該段文字變色。

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

使用「三元表達式」切換 Class

  • 根據判斷條件結果的 true 或 false 來加載不同的 ClassName
  • 語法：:class="[加載條件(判斷式)? '結果為 True 的 Class': '結果為 False 的 Class']"
  • 使用中括號

範例：

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

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

  • 我們可以使用陣列的方式，在同一個 HTML 標籤上綁定多種 ClassName 與條件
  • 語法：:class = "[動態綁定 Class1, 動態綁定 Class2]"
  • 使用陣列包住多個 v-bind 動態綁定的條件式

例如：

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

在這個陣列裡面可以寫很多組動態綁定，但是這麼做其實會降低程式碼的可讀性，如果真的需要綁定這麼多條件，也可以使用 computed 等方式來解決，否則一次綁定這麼多其實會讓這段程式碼變得太複雜，有時候 Code 寫得簡單好懂一些也是很重要的！

結語

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

參考資料

  1. VUE 爬坑之旅–class 动态绑定的几种写法_javascript_Alex_Zhao 的博客-CSDN 博客

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