使用 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 | <span :class="{'text-primary': clicked}" @click="clicked = !clicked"> |
使用「三元表達式」切換 Class
- 根據判斷條件結果的
true
或false
來加載不同的 ClassName - 語法:
:class="[加載條件(判斷式)? '結果為 True 的 Class': '結果為 False 的 Class']"
- 使用中括號
範例:
1 | <span |
結合陣列一次綁定多個條件
- 我們可以使用陣列的方式,在同一個 HTML 標籤上綁定多種 ClassName 與條件
- 語法:
:class = "[動態綁定 Class1, 動態綁定 Class2]"
- 使用陣列包住多個
v-bind
動態綁定的條件式
例如:
1 | <div |
在這個陣列裡面可以寫很多組動態綁定,但是這麼做其實會降低程式碼的可讀性,如果真的需要綁定這麼多條件,也可以使用 computed
等方式來解決,否則一次綁定這麼多其實會讓這段程式碼變得太複雜,有時候 Code 寫得簡單好懂一些也是很重要的!
結語
v-bind 除了可以綁定 class
以外,也可以綁定 style
等屬性,甚至是使用如 Quasar 等 UI 框架時,還能直接綁定 color
、size
等官方給定的其他屬性。
不過在做這些花式綁定時,要注意屬性接收的值是什麼類別,如果要求的是 String,就需要把 []
或 {}
拿掉,讓後面的值符合該型別,否則就會報錯哩。
參考資料
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。