# 🏅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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/LYKmLgW) |
| Eric0823 | [CodePen](https://codepen.io/a7901477/pen/YzoQGPV) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/bGPRwdj) |
| anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/XWLgjKJ) |
| Mars | [CodePen](https://codepen.io/MarsKuo/pen/ZEdypeE) |
| Aden | [CodePen](https://codepen.io/Osases/pen/BagZLWO) |
| KK | [CodePen](https://reurl.cc/DlZVdR) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/PorjGPQ) |
|HsienLu|[CodePen](https://codepen.io/Hsienlu/pen/qBzjaxm)|
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/MWMojza) |
| mu mu | [CodePen](https://codepen.io/ishuki916/pen/ZEdypPW) |
| dodo | [CodePen](https://codepen.io/MissDouble/pen/dyBRprd) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/yLdXaGN) |
| Charis_Lai | [CodePen](https://codepen.io/charislai/pen/oNrwzVp) |
| chichi | [CodePen](https://codepen.io/chichihuang/pen/MWMobJJ) |
| Tough life |[CodePen](https://codepen.io/hakuei0115/pen/ZEdyBOL) |
| 末次 | [CodePen](https://codepen.io/yunjulee/pen/XWLgNRe) |
| 皮克 | [CodePen](https://codepen.io/yen-kg/pen/NWVMzpZ) |
| cherylxie | [CodePen](https://codepen.io/fi7933201/pen/JjQJEWQ) |
| 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/ZEdyLgN) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/oNrwZxB) |
|陳睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/BagZWrG)|
|好了啦|[CodePen](https://codepen.io/j-z-the-flexboxer/pen/jOjwwqG)|
| Shin | [CodePen](https://codepen.io/shin9626/pen/wvLeeJd)|
| Tanyaaaa | [CodePen](https://codepen.io/tanya77777/pen/QWXgMZX) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/poXwdKZ) |
| 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/poXwpJG)
| ling | [CodePen](https://codepen.io/yen-kg/pen/NWVMzpZ) |
| JC | [CodePen](https://codepen.io/jy_123/pen/vYqZpme) |
| YO | [CodePen](https://codepen.io/Y-1717/pen/oNrwpMe) |
| Steven1220 | [CodePen](https://codepen.io/Steven1220/pen/QWXgQGj) |
| willy0719 | [CodePen](https://codepen.io/DOBEST/pen/QWXgQQE) |
| anthy7154 | [CodePen](https://codepen.io/hnhmgzbw-the-sans/pen/KKjqQOq) |
| imsmallnew | [CodePen](https://codepen.io/imsmallnew/pen/XWLgygy) |
| kuolun | [CodePen](https://codepen.io/kuolun/pen/jOjwQex) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/VwJWqjP)|
| Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/OJegrer) |
| Renee | [CodePen](https://codepen.io/renee_wu/pen/poXwMrB) |
| zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/XWLarXp) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/bGPrbxV) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/PorKoRb) |
| Yuwen |[CodePen](https://codepen.io/Yuwen-the-reactor/pen/GRbvNNw)
| sandra191919 |[CodePen](https://codepen.io/a0960529965/pen/QWXMKzP)
| Barry1104 |[CodePen](https://codepen.io/barry1104/pen/gONxWPQ)
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/gONxGKJ) |
| Jay | [CodePen](https://codepen.io/yeeyaha-jay/pen/dyBzpMX) |
| Abby | [CodePen](https://codepen.io/abby1125/pen/zYVdPQX) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/mdZMQZr) |
| 咖咖 | [CodePen](https://codepen.io/gon790219/pen/dyBzEZm) |
| Rumi | [CodePen](https://codepen.io/Tzuru-Chen/pen/YzoryOz) |
| zhen | [CodePen](https://codepen.io/yunnnz/pen/YzorEwB) |
| floya9733 | [CodePen](https://codepen.io/TZU68/pen/RwzLMqN) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/WNqZayV) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/qBzPzQg) |
| Danny | [Codepen](https://codepen.io/letitia-chiu/pen/qBzPzQg) |
| Peter | [Codepen](https://codepen.io/peterhsj/pen/bGPaozO) |
| Triple | [CodePen](https://codepen.io/riku30/pen/ExBoMbX) |
| cami | [CodePen](https://codepen.io/irisLife/pen/vYqdxGM) |
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/zYVjrrZ) |
| Zoe | [CodePen](https://codepen.io/roanne-rou/pen/poXVMmN) |
| Ching | [CodePen](https://codepen.io/huangching/pen/rNEPyBz) |
| Eden | [Codepen](https://codepen.io/iseden/pen/XWvjpQQ) |
| 叮咚 | [Codepen](https://codepen.io/yen-kg/pen/NWVMzpZ) |
<!--

| user | [CodePen]() |

-->