# 🏅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 內的網址來呈現圖片

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-if, v-else, v-else-if, v-show 範例 (2)" src="https://codepen.io/yen-kg/embed/KKLRRJY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/KKLRRJY">
Composition API：v-if, v-else, v-else-if, v-show 範例 (2)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 綁定 Class

綁定樣式，參考文件 [Class 与 Style 绑定](https://cn.vuejs.org/guide/essentials/class-and-style.html#class-and-style-bindings)
可以透過 :class 的物件綁定並動態切換 Class，物件的屬性為 className，後方的值是表達式結果，如果為真值則會套用該 className。

範例重點：

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

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-bind 範例 (3)" src="https://codepen.io/yen-kg/embed/WNBJJBP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/WNBJJBP">
Composition API：v-bind 範例 (3)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

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

範例重點：

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

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-bind 範例 (2)" src="https://codepen.io/yen-kg/embed/OJYZZqE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/OJYZZqE">
Composition API：v-bind 範例 (2)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

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

範例重點：

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

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-bind 範例 (2)" src="https://codepen.io/yen-kg/embed/ExzLLBK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/ExzLLBK">
Composition API：v-bind 範例 (2)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 行內樣式

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

範例重點：

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

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-bind 範例 (4)" src="https://codepen.io/yen-kg/embed/QWRrrXo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/QWRrrXo">
Composition API：v-bind 範例 (4)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 觀念動態屬性 VS 靜態屬性

此範例為觀念題，不需要操作：

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

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-bind 範例 (6)" src="https://codepen.io/yen-kg/embed/XWwqYrX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/XWwqYrX">
Composition API：v-bind 範例 (6)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/NWVMzpZ)，執行以下要求（只能操作 HTML 的部分）：

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

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


## 回報流程

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


<!-- 解答：
<template>
<div id="app" class="container">
<div class="row">
<template v-for="(fruit, index) in fruitData" :key="index">
<div class="col-md-6 mb-3">
<div class="card" style="width: 100%;">
<img :src="fruit.imgUrl" class="card-img-top w-25" :alt="fruit.title">
<div class="card-body">
<h5 class="card-title">水果名稱：{{ fruit.title }}</h5>
<p class="card-text my-2">價錢：{{ fruit.price }}</p>
<p class="card-text mb-3">數量：{{ fruit.count }}</p>
<a href="#" class="btn btn-primary" @click="addProduct(fruit)">加入購物車</a>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/gbaGroY) |
| DaRon | [CodePen](https://codepen.io/daron0811/pen/WbQZxrE) |
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/WbQZxjX) |
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/VYvMjGj) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/YPyrWMN) |
| 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/empGdBY) |
| Gui | [CodePen](https://codepen.io/guitimliu/pen/pvjWEYJ) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/VwJWqjP)|
| Clove_墨 | [Codepen](https://codepen.io/CloveTseng1026/pen/myeBOXZ)|
| 小羊 | [CodePen](https://codepen.io/allen9630308/pen/MYaEbNQ) |
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/myeBRjR) |
| dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/WbQZRmy) |
| Lin | [CodePen](https://codepen.io/Lin4611/pen/MYaEpad) |
| haohaoliao | [CodePen](https://codepen.io/yuyuyuhaohao/pen/GgpMWoO) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/pvjWewX) |
| wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/QwjqpJe) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/GgpMmMb) |
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/VYvMWvZ) |
| dean | [CodePen](https://codepen.io/ch933114/pen/ogjGwMj) |
| wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/XJmeabr) |
| kat | [Codepen](https://codepen.io/Nek0u0/pen/dPYVVRg) |
|rio_wei|[CodePen](https://codepen.io/wei_wu/pen/QwjqqVG)|
| 阿昌 |[CodePen](https://codepen.io/ychleo102615/pen/zxvEPPb)|
| William Hsieh |[CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/bNVoYMY)|
| Loder|[CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/JoYrLwj)|
| 黛西|[CodePen](https://codepen.io/ChiashengLin/pen/GgpMbqp)|
| 阿Kai|[CodePen](https://codepen.io/kaihuang3013/pen/JoYrgEX)|
| yu005620|[CodePen](https://codepen.io/yu-chin-chiang/pen/ByomNeo)|
| jimmy|[CodePen](https://codepen.io/JimmyMao/pen/RNWjGbo)|
| bonnieli1414|[CodePen](https://codepen.io/bonnieli1414/pen/xbwPRez)|
| Rexlin|[CodePen](https://codepen.io/Rexlin595/pen/OPyOWbN)|
| Momoze|[CodePen](https://codepen.io/mleczmam-the-typescripter/pen/zxvPZNO)|
| Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/qEOVXRb) |
| 地呱 | [Codepen](https://codepen.io/yen-kg/pen/NWVMzpZ) |
| 肉桂卷 | [Codepen](https://codepen.io/ginnlee/pen/raOpdxz) |
| 牙山 | [CodePen](https://codepen.io/Tzuru-Chen/pen/pvjpOQq) |
| 禹成林 | [CodePen](https://codepen.io/useirin/pen/VYvyEYW) |
| David0799 | [CodePen](https://codepen.io/David0799/pen/wBKJjza) |
| Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/ZYbrYXm) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/PwPeQwb) |
| 白雪 | [CodePen](https://codepen.io/weiwei032835-the-styleful/pen/Qwjrrwy) |
| Chen | [CodePen](https://codepen.io/JGM-C/pen/XJmYgvp) |
| ScarT | [CodePen](https://codepen.io/Acadia/pen/MYaBbyr) |
| Toung | [Codepen](https://codepen.io/Toung/pen/pvjxzwR) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/WbwdPVP) |

<!--

| user | [CodePen]() |

-->