官方文件:https://cn.vuejs.org/api/built-in-directives.html#v-bind
縮寫::
說明:動態地綁定 HTML 屬性,將資料傳遞到元素上。
:
是 v-bind 的縮寫<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<img :src="'/path/to/images/' + fileName">
範例重點:
:value
動態屬性傳入 data 內的值或是任何 JS 表達式的結果:src
也同樣道理可傳入 data 內的網址來呈現圖片綁定樣式,參考文件 Class 与 Style 绑定
可以透過 :class 的物件綁定並動態切換 Class,物件的屬性為 className,後方的值是表達式結果,如果為真值則會套用該 className。
範例重點:
:class
可以使用動態切換 className"{rotate: isTransform}"
物件中的前者為 className 名稱,後者為判斷式,當為真值時則啟用前者的 classNameisTransform
的 true
or false
來決定是否套用 rotate
綁定的物件也不需要撰寫在模板內,在 data 內定義同樣可運作:
範例重點:
除此之外還可使用陣列操作,同時為同一個元素賦予多個樣式
範例重點:
Style 也同樣可以使用動態屬性的方式傳入,但要特別注意 class 的名稱要使用小駝峰
範例重點:
{ backgroundColor: 'red' }
前者為 CSS 的屬性,後者為該屬性的值此範例為觀念題,不需要操作:
:src
vs src
)