---
# System prepended metadata

title: v-model 表單運用
tags: [Vue]

---

###### tags: `Vue`

# v-model 表單運用

## Select

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

[程式碼範例](https://codepen.io/Steven1220/pen/JjOoZvE?editors=1010)


## checkbox

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

```html
<div id="app">
  <div class="form-check">
    <!--   input 沒有加上 vlaue   -->
    <input type="checkbox" class="form-check-input" id="check1" v-model="checkbox1">
    <label class="form-check-label" for="check1">{{ checkbox1 }}</label>
  </div>
</div>
```

```javascript=
const app = {
    data(){
        return {
            checkbox1: false
        }
    }
}

Vue.createApp(app).mount('app');

```

下方為 html 顯示畫面 (click 後會切換 true 或 false)
![](https://i.imgur.com/r1oOGJU.png)


### checkbox 多選選項

 當 input type 是 checkbox，都有設定 value，且 input 的 v-model 是對應同一個 data，資料格式是
 陣列時，這樣就是將 **資料綁定到同一個陣列內** ，此時選取的 input 的 value 為即為陣列內的值

[程式碼範例](https://codepen.io/Steven1220/pen/gOXbjOZ)


### radio 單選

當 input type 是 radio，都有設定 value，且 input 的 v-model 是對應同一個 data，資料格式是字串，選取的 radio 的值即為 v-model 的值


[程式碼範例](https://codepen.io/Steven1220/pen/eYemjyR?editors=1010)


