本文介紹了VUE實現表單元素雙向綁定（總結） ，分享給大家，具體如下：

checkbox最基本用法:

<input type="checkbox" v-model="inputdata" checked/><input type="checkbox" v-model="inputdata"/><input type="checkbox" v-model="inputdata"/>new Vue({  el:".......",  data:{    inputdata:false //邏輯類型  }　　ready:function(){　　　　console.log(this.inputdata)//true　　}})

規則1：如果v-model綁定的變量類型為boolean，若input被選中，this.inputdata為true,否則this.inputdata為false。

inputdata變量初始設置為false，但是在頁面進行編譯時，因為第一個input為選中狀態，所以更新inputdata為true，那么渲染結束之后三個input均為選中狀態，且三個input狀態同步。

<input type="checkbox" value="a" v-model="inputdata" checked/><input type="checkbox" value="b" v-model="inputdata"/><input type="checkbox" value="c" v-model=""inputdata" checked/>new Vue({ 　　el:".......", 　　data:{ 　　　　inputdata:[]//數組類型　　} 　　　　ready:function(){ 　　　　　　　　console.log(this.inputdata)//[a,c]　　} })

規則2：如果v-model綁定的變量類型為數組，那么綁定該變量的元素若被選中，把該元素的value值添加進數組，若不被選中，那么把該元素的value從數組中去除。

所以在v-model綁定的變量類型是數組的情況下，務必設置綁定該變量的每個元素的value值，且value值不要相等。見上例。

 radio基本用法

<input type="radio" value="a" v-model="inputdata" /><input type="radio" value="b" v-model="inputdata" checked/><input type="radio" value="c" v-model="inputdata" checked/>new Vue({  el:".......",  data:{    inputdata:"a"  }　　ready:function(){　　　　console.log(this.inputdata)// c　　}})

規則：v-model綁定的變量值如果等于input元素其中一個value值，那么該表單元素會被選中，如果不等于任何input的value值，所有相關元素不選中。同時如果選中某個input元素，那么該元素的value值就會被賦給該變量，頁面重新渲染。

如上，初始this.inputdata為"a"，在編譯到第二個input時，因為屬性為checked表示選中，該元素value為"b",所以this.inputdata值為"b",然后編譯到第三個input時，同樣存在checked，所以this.inputdata為"c"。編譯結束后，this.inputdata值為"c"，頁面最終渲染效果為第三個被選中，前兩個未被選中。

select基本用法

<select v-model="selected"> <option>A</option> <option selected>B</option> <option>C</option></select><br><span>Selected: {{ selected | json }}</span>new Vue({　　el:"....",　　data:{　　　　selelcted:"A"　　}})