---
tags: Vue 實戰班
---

# 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="v-model 表單運用" src="https://codepen.io/Wcc723/embed/XWLMErG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/XWLMErG">
v-model 表單運用</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</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="Checkbox 與 Radio-1" src="https://codepen.io/Wcc723/embed/ExBWEYz?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/ExBWEYz">
Checkbox 與 Radio-1</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</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="Checkbox 與 Radio-2" src="https://codepen.io/Wcc723/embed/abgJYog?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/abgJYog">
Checkbox 與 Radio-2</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</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="Checkbox 與 Radio-3" src="https://codepen.io/Wcc723/embed/JjQWLjP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/JjQWLjP">
Checkbox 與 Radio-3</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>