# 🏅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 / 答案 |
|:---:|:----------------:|:-------------------------------------------------------------------:|
| 01 | dean | [CodePen](https://codepen.io/ch933114/pen/ByoRdVN) |
| 02 | 雪粒 | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/WbQjZvj) |
| 03 | 小羊 | [CodePen](https://codepen.io/allen9630308/pen/WbQjZRE) |
| 04 | thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/MYamEpX) |
| 05 | kat | [CodePen](https://codepen.io/Nek0u0/pen/empWerp) |
| 06 | Gui | [CodePen](https://codepen.io/guitimliu/pen/EaVmbON) |
| 07 | Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/bNVWYmZ) |
| 08 | yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/vENmpXQ) |
| 09 | dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/EaVmbrZ) |
| 10 | poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/MYamryj) |
| 11 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/OPymzvJ) |
| 12 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/JjQJNJv)|
| 13 | DY | [Codepen](https://codepen.io/dorihung/pen/bNVWYPy)|
| 14 | Candace | [Codepen](https://codepen.io/Candace802/pen/WbQjzVV)|
| 15 | Sam | [Codepen](https://codepen.io/Sammy-the-styleful/pen/gbaWjqd)|
| 16 | 地呱 | [Codepen](https://codepen.io/LHung/pen/wBKdEzV) |
| 17 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/JoYNaBB) |
| 18 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/LEpyJMX) |
| 19 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/vENmVVK) |
| 20 | Loder | [Codepen](https://codepen.io/rgbkomhs-the-flexboxer/pen/bNVWQvQ) |
| 21 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/JoYNVza) |
| 22 | Clove_墨 | [Codepen](https://codepen.io/CloveTseng1026/pen/MYaogvG) |
| 23 | 阿鵝 | [Codepen](https://codepen.io/noracami/pen/MYaoWaL) |
| 24 | emmayo | [Codepen](https://codepen.io/emmayo/pen/QwjgWee) |
| 25 | yi | [Codepen](https://codepen.io/5-1/pen/jEbwORg) |
| 26 | Momoze | [Codepen](https://codepen.io/mleczmam-the-typescripter/pen/zxvzxQW) |
| 27 | bonnieli1414 | [Codepen](https://codepen.io/bonnieli1414/pen/bNVREob) |
| 28 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/YPyQWZZ) |
| 29 | 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/MYaoeqg) |
| 30 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/qEOjNzj) |
| 31 | wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/GgpEqPd) |
| 32 | 阿kai | [Codepen](https://codepen.io/kaihuang3013/pen/RNWgoxW) |
| 33 | Lin | [Codepen](https://codepen.io/Lin4611/pen/LEpLWvg) |
| 34 | haohaoliao | [Codepen](https://codepen.io/yuyuyuhaohao/pen/qEOjYpx) |
| 35 | jimmy | [Codepen](https://codepen.io/JimmyMao/pen/MYavyVr) |
| 36 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/MYavrmY) |
| 37 | 牙山 | [Codepen](https://codepen.io/Tzuru-Chen/pen/RNWZQwv) |
| 38 | Rexlin | [Codepen](https://codepen.io/Rexlin595/pen/YPyxBqd) |
| 39 | 阿昌 | [Codepen](https://codepen.io/ychleo102615/pen/YPyxgdN) |
| 40 | David0799 | [Codepen](https://codepen.io/David0799/pen/MYapbZd) |
| 41 | Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/zxvdXOx) |
| 42 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/EaVvzNo) |
| 43 | 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/WbQEBaR) |
| 44 | 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/qEOPqYJ) |
| 45 | rio_wei| [CodePen](https://codepen.io/wei_wu/pen/WbQZZjQ)|
| 46 | 禹成林| [CodePen](https://codepen.io/useirin/pen/ZYbaPax)|
| 47 | 肉桂卷| [CodePen](https://codepen.io/ginnlee/pen/yyYpXeM)|
| 48 | 邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/QwjQbGo)|
| 49 | 白雪 |[CodePen](https://codepen.io/weiwei032835-the-styleful/pen/XJmqKve)|
| 50 | Chen |[CodePen](https://codepen.io/JGM-C/pen/WbQyOMW)|
| 50 | ScarT |[CodePen](https://codepen.io/Acadia/pen/zxvLqYj)|
| 51 | Toung | [Codepen](https://codepen.io/Toung/pen/XJmPqoM) |
| 52 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/PwNEVPp) |