🏅Day7 - Vue.js 的基礎魔法：v-bind

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
• 可以透過動態切換 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

題目

操作 這個模板，執行以下要求（只能操作 HTML 的部分）：

• 請利用 v-bind 將資料中的 imgUrl 綁定至 img 標籤的 src 屬性，title 資料綁定至 img 標籤上的 alt 屬性 。

並能正確的呈現出畫面，如下圖：

回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

回報區

Discord	CodePen / 答案
Michael	CodePen
Eric0823	CodePen
Hilda	CodePen
anderson666	CodePen
Mars	CodePen
Aden	CodePen
KK	CodePen
SKey	CodePen
HsienLu	CodePen
Ariel	CodePen
mu mu	CodePen
dodo	CodePen
Zhu	CodePen
Charis_Lai	CodePen
chichi	CodePen
Tough life	CodePen
末次	CodePen
皮克	CodePen
cherylxie	CodePen
阿B	CodePen
duchi	CodePen
陳睿睿	CodePen
好了啦	CodePen
Shin	CodePen
Tanyaaaa	CodePen
rjjq	CodePen
蛋黃	CodePen
ling	CodePen
JC	CodePen
YO	CodePen
Steven1220	CodePen
willy0719	CodePen
anthy7154	CodePen
imsmallnew	CodePen
kuolun	CodePen
ya_meow	Codepen
Dolce_墨	CodePen
Renee	CodePen
zaoannihao	Codepen
阿鵝	CodePen
Kevin Wei	CodePen
Yuwen	CodePen
sandra191919	CodePen
Barry1104	CodePen
Tatsu	CodePen
Jay	CodePen
Abby	CodePen
Fabio20	CodePen
咖咖	CodePen
Rumi	CodePen
zhen	CodePen
floya9733	CodePen
小趴	Codepen
Letitia	Codepen
Danny	Codepen
Peter	Codepen
Triple	CodePen
cami	CodePen
World	CodePen
Zoe	CodePen
Ching	CodePen
Eden	Codepen
叮咚	Codepen