VUE实现表单元素双向绑定（总结）

本文介绍了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"　　}})