[TOC] ## v-model 1. 推薦表單元素綁定到一個 form 對象 2. checkbox 需要顯示設置 form.xxx 為數組 3. v-model 的好處是直接可以獲取 radio 或者 checkbox 的value值 4. v-model 在對數據顯示radio 或checkbox 時綁定 form.xxx 對象,可以直接顯示對象的值 v-model 實現方式 ``` <input type="text" v-model="message"> 等同于 <input type="text" v-bind:value="message" v-on:input="message = $event.target.value"> ``` 實例 ``` <input type="text" v-model="form.message"> <div>{{form.message}}</div> <div> <label for="male"> <input type="radio" value="男" v-model="form.male"> <input type="radio" value="女" v-model="form.male"> </label> </div> <div> <label for="love"> <input type="checkbox" value="eat" v-model="form.love"> <input type="checkbox" value="running" v-model="form.love"> </label> </div> <div> <select name="job" id="" v-model="form.select"> <option value="醫生">醫生</option> <option value="學生">學生</option> <option value="學生1">學生1</option> </select> </div> <input type="button" value="按鈕" @click="btn"> </div> // js data() { return { myArray: [{id:1, name: 'aa'}], myArray2: [], form:{ love:[] } } }, methods: { btn(){ console.log(this.form); // {"love":["running","eat"],"male":"女","message":"33434","select":"學生"} } } ```