v-bind

官方文件:https://cn.vuejs.org/api/built-in-directives.html#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
  • 可以透過動態切換 isTransformtrue or false 來決定是否套用 rotate

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

範例重點:

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

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

範例重點:

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

行內樣式

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

範例重點:

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

此範例為觀念題,不需要操作:

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