# tags: `2021直播班任務`
v-bind
官方文件：https://cn.vuejs.org/v2/api/#v-bind
縮寫：:

說明：動態地綁定 HTML 屬性，將資料傳遞到元素上。

動態屬性
: 是 v-bind 的縮寫
v-bind 可以使用各種 JS 的表達式
可以傳入 data 內的資料
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<img :src="'/path/to/images/' + fileName">
範例重點：

input 中可以使用 :value 動態屬性傳入 data 內的值或是任何 JS 表達式的結果
:src 也同樣道理可傳入 data 內的網址來呈現圖片

綁定 Class
綁定樣式，參考文件 Class 与 Style 绑定
可以透過 :class 的物件綁定並動態切換 Class，物件的屬性為 className，後方的值是表達式結果，如果為真值則會套用該 className。

範例重點：

:class 可以使用動態切換 className
"{rotate: isTransform}" 物件中的前者為 className 名稱，後者為判斷式，當為真值時則啟用前者的 className
可以透過動態切換 isTransform 的 true or false 來決定是否套用 rotate

綁定的物件也不需要撰寫在模板內，在 data 內定義同樣可運作：

範例重點：

同樣的邏輯也可直接寫於 data 內，優點是可以同時定義更多的 className 而不造成 HTML 的混亂

除此之外還可使用陣列操作，同時為同一個元素賦予多個樣式

範例重點：

如果傳入的是陣列，則可以直接啟用該 className
透過 checkbox 的切換，則可以操作陣列內的多個值，在 v-model 章節會另有介紹，在此可以專注 input 內的 value 即可

行內樣式
Style 也同樣可以使用動態屬性的方式傳入，但要特別注意 class 的名稱要使用小駝峰

範例重點：

可以透過 :style 的方式傳入樣式
傳入時，樣式的屬性名稱需要使用小駝峰的方式撰寫
{ backgroundColor: 'red' } 前者為 CSS 的屬性，後者為該屬性的值

觀念動態屬性 VS 靜態屬性
此範例為觀念題，不需要操作：

動態屬性 VS 靜態屬性（ex::src vs src）
靜態屬性
無法進行運算
型別一律是字串
動態屬性
可以傳入任何表達式結果，如：
true, false vs ‘true’
1 vs ‘1’
可以傳入 Vue 的 data

Published on HackMD
693