###### 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

<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>

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

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

下方為 html 顯示畫面 (click 後會切換 true 或 false)

### 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)