使用 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

  • 根據判斷條件結果的 truefalse 來加載不同的 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 框架時,還能直接綁定 colorsize 等官方給定的其他屬性。
不過在做這些花式綁定時,要注意屬性接收的值是什麼類別,如果要求的是 String,就需要把 []{} 拿掉,讓後面的值符合該型別,否則就會報錯哩。

參考資料

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

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