# 🏅Day3 - Vue.js 的基礎魔法：v-model 表單運用

## v-model 表單運用

`v-model` 除了用在 input 上以外，所有的表單項目也都可套用，如 select、checkbox、textarea 皆可，不同的項目應用方式略有不同。

## Select

作為 Select 的選項可以直接使用 option 標籤中的 value，或是透過 v-for 搭配元件內的 data 產生多個 option，兩者都是同樣以 value 作為資料來源。

範例重點：

- select 所綁定的 v-model 其值來自於 `<option></option>` 內的 value
- value 可以使用自行撰寫或使用 v-for 搭配 Vue Data 來呈列（v-for 在後面的範例會提到，用於呈現多筆資料）

<iframe height="300" style="width: 100%;" scrolling="no" title="🏅 Day5 - Vue.js 的基礎魔法：v-model 表單範例 (2)" src="https://codepen.io/yen-kg/embed/KKLRoBy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/KKLRoBy">
🏅 Day5 - Vue.js 的基礎魔法：v-model 表單範例 (2)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Checkbox 與 Radio

預設來說，checkbox 是作為一個資料的 true or false。

範例重點：

- 當 input checkbox 沒有設定 `value` 時，預設是作為 v-model 對應屬性的 `true` or `false`

<iframe height="300" style="width: 100%;" scrolling="no" title="🏅 Day5 - Vue.js 的基礎魔法：v-on" src="https://codepen.io/yen-kg/embed/OJYZvER?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/OJYZvER">
🏅 Day5 - Vue.js 的基礎魔法：v-on</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

或者可做為多個選向，將資料綁定到同一個陣列內。

範例重點：

- checkbox 是多選選項
- 如果多個 input checkbox 的 v-model 是對應同一個 data，並且有設定 value 時，則是將該 data 視為一個陣列，核取的選項則為陣列內的值

<iframe height="300" style="width: 100%;" scrolling="no" title="🏅 Day5 - Vue.js 的基礎魔法：v-model 表單範例 (1)" src="https://codepen.io/yen-kg/embed/RwmyMYW?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/RwmyMYW">
🏅 Day5 - Vue.js 的基礎魔法：v-model 表單範例 (1)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Radio 則是單一選項

範例重點：

- radio 則是單一選項
- 如果多個 input radio 的 v-model 是對應同一個 data 時，該 v-model 的值則是核取的 radio 選項

<iframe height="300" style="width: 100%;" scrolling="no" title="🏅 Day5 - Vue.js 的基礎魔法：v-model 表單範例 (3)" src="https://codepen.io/yen-kg/embed/ExzLEeG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/ExzLEeG">
🏅 Day5 - Vue.js 的基礎魔法：v-model 表單範例 (3)</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/qBGoEBZ)，執行以下要求（只能修改 HTML 的部分）：
* 請將 class 名稱為 .Q1、.Q2 的 div 標籤，利用 `v-model` 將資料進行雙向綁定，選取時能夠正確呈現資料。


## 回報流程

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


<!-- 解答：
<template>
<div id="app">
<div class="container">
<div class="Q1 mb-5">
<form>
<div v-for="fruit in fruitData" :key="fruit.title" class="form-check">
<input
type="checkbox"
:id="fruit.title"
:value="fruit.title"
v-model="checkedFruits"
class="form-check-input"
/>
<label :for="fruit.title" class="form-check-label">{{ fruit.title }}</label>
</div>
</form>
<div class="mt-3">
透過 checkbox 選擇的水果：<span class="fw-bold">{{ checkedFruits.join(', ') }}</span>
</div>
</div>

<div class="Q2">
<select class="form-select mb-2" v-model="selected">
<option
v-for="fruit in fruitData"
:key="fruit.title"
:value="fruit.title"
>
{{ fruit.title }}
</option>
</select>
<div class="mt-3">
透過 select 選擇的水果：<span class="fw-bold">{{ selected }}</span>
</div>
</div>
</div>
</div>
</template>
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [Codepen](https://codepen.io/RenHuang-Huang/pen/KKjRqyJ) |
| CWT | [Codepen](https://codepen.io/ttfunqgb-the-vuer/pen/XWLpOVo) |
|HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/eYwgxVP)|
| n913239 | [CodePen](https://codepen.io/n913239/pen/rNEjPpQ) |
| Mars | [CodePen](https://codepen.io/MarsKuo/pen/GRbrzYr) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/GRbrzGN) |
| kuolun | [CodePen](https://codepen.io/kuolun/pen/OJeWqNQ) |
| Charis_Lai | [CodePen](https://codepen.io/charislai/pen/mdZRogK) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/poXRBJJ) |
| Jay |[CodePen](https://codepen.io/yeeyaha-jay/pen/LYKxaQW) |
| Dolce | [CodePen](https://codepen.io/DolceTseng1026/pen/MWMJdwr) |
| anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/YzoNbgW) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/xxogoRw) |
| Tanyaaaa | [CodePen](https://codepen.io/tanya77777/pen/dyBNBpO) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/GRbrbYd) |
|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/RwzpbqR)
| 咖咖 | [CodePen](https://codepen.io/gon790219/pen/eYwvYpa) |
| ABOOS | [CodePen](https://codepen.io/guhungyin/pen/qBzrBmN) |
| 蛋黃 |[Codepen](https://codepen.io/yiyun12o9/pen/NWZpWgL) |
| YO |[Codepen](https://codepen.io/Y-1717/pen/abgJbjZ)|
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/VwJPgJj)|
|rjjq|[CodePen](https://codepen.io/rjjq/pen/jOjBPxY)|
|阿鵝|[CodePen](https://codepen.io/noracami/pen/GRbWoBa)|
|貢波波夫|[CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/dyBvOqP)|
|mu mu|[CodePen](https://codepen.io/ishuki916/pen/RwzpKap)|
| imsmallnew | [Codepen](https://codepen.io/imsmallnew/pen/LYKWxmx) |
| Aden | [Codepen](https://codepen.io/Osases/pen/vYqxgae) |
| 末次 | [Codepen](https://codepen.io/yunjulee/pen/VwJpeBV) |
| cherylxie | [Codepen](https://codepen.io/fi7933201/pen/VwJpPmm) |
| chichi | [Codepen](https://codepen.io/chichihuang/pen/Porppar) |
| 皮克 | [Codepen](https://codepen.io/bad-527boy/pen/LYKWyYX) |
| Tough life | [Codepen](https://codepen.io/hakuei0115/pen/KKjWmyy)|
| 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/MWMpooR) |
| Barry1104 | [CodePen](https://codepen.io/barry1104/pen/BagWdZe) |
| Shin | [CodePen](https://codepen.io/shin9626/pen/ExBWbeP) |
| zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/vYqxdNq) |
| KK | [Codepen](https://reurl.cc/zDWd8a) |
| 好了啦 | [Codepen](https://codepen.io/j-z-the-flexboxer/pen/dyBvmvp) |
| Zhen | [Codepen](https://codepen.io/yunnnz/pen/WNqpJvB) |
| k | [Codepen](https://codepen.io/Kkchen/pen/gONmZQJ) |
| 小葉 | [Codepen](https://codepen.io/rsosijvr-the-flexboxer/pen/YzoZdoB) |
| Rumi | [Codepen](https://codepen.io/Tzuru-Chen/pen/wvLdawB) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/ExBmjWR)|
| m.m | [CodePen](https://codepen.io/meggie-liu/pen/wvLdGGK)|
| anthy7154 | [CodePen](https://codepen.io/hnhmgzbw-the-sans/pen/xxoddKY)|
| Mina | [CodePen](https://codepen.io/yanling-99/pen/wvLddgK)|
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/mdZmqpW)|
| willy0719 | [CodePen](https://codepen.io/DOBEST/pen/YzoVaPX)|
| Abby | [CodePen](https://codepen.io/abby1125/pen/wvLdjwx) |
| dodo | [CodePen](https://codepen.io/MissDouble/pen/dyBWeed) |
| ling | [CodePen](https://codepen.io/yen-kg/pen/qBGoEBZ) |
| duchi |[CodePen](https://codepen.io/sqaz0502/pen/LYKyvMe) |
| Steven1220 | [CodePen](https://codepen.io/Steven1220/pen/BagZpxd)|
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/JjQJNJv)|
| sandra191919 |[Codepen](https://codepen.io/a0960529965/pen/qBzjvJB)|
| JC |[Codepen](https://codepen.io/jy_123/pen/OJegQBV)|
| Yuwen |[Codepen](https://codepen.io/Yuwen-the-reactor/pen/abgwMmP) |
| Aya | [Codepen](https://codepen.io/NoNameNote/pen/WNqOWmB) |
| Renee | [Codepen](https://codepen.io/renee_wu/pen/WNqOqEE) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/MWMvzEQ) |
| Chieh | [CodePen](https://codepen.io/Chieh_/pen/jOjLXLe) |
| jacky | [CodePen](https://codepen.io/yen-kg/pen/qBGoEBZ) |
| floya9733 | [CodePen](https://codepen.io/TZU68/pen/abgLmeN) |
| 阿榮 | [CodePen](https://codepen.io/codeitaday/pen/WNqZEyK) |
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/vYqeexR) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/jOjGeNd)|
| Danny | [Codepen](https://codepen.io/danny666/pen/GRbMzQX) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/RwzLzRd) |
| mia | [Codepen](https://codepen.io/mnscake/pen/zYVPqXZ) |
| cami | [Codepen](https://codepen.io/irisLife/pen/NWZXKgO)
| Triple | [CodePen](https://codepen.io/riku30/pen/ExBogNd) |
| Peter | [CodePen](https://codepen.io/peterhsj/pen/wvLprjx) |
| Zoe | [CodePen](https://codepen.io/roanne-rou/pen/vYqdjgM) |
| Erin | [CodePen](https://codepen.io/erin-feng/pen/mdZxvRe) |
| Ching | [CodePen](https://codepen.io/huangching/pen/KKjJNxJ) |
| Eden | [Codepen](https://codepen.io/iseden/pen/XWvXWrL)|
| 叮咚 | [Codepen](https://codepen.io/yen-kg/pen/qBGoEBZ)|

<!--

| user | [CodePen]() |

-->