Vue提供了v-model指令，用于<input> <textarea> <select>等表单类元素上双向绑定事件。

基本用法

<div id='app'><input v-model='value' type="text">{{value}}
</div>
复制代码

var app = new Vue({el:'#app',data:{value:''}
})
复制代码

此时在输入框中输入文字就能实时更新到页面中。

单选框

<div id="app"><input type="radio" v-bind:checked="onradio"><!--不可以用v-model-->
</div>
复制代码

 var app = new Vue({el:'#app',data:{onradio: true}})
复制代码

此时展现的是一个默认选中的单选框。

多个单选框

    微笑：<input type="radio" name='ww' value="微笑" v-model='checkname '>哭泣：<input type="radio" name='ww' value="哭泣" v-model='checkname '>狂欢：<input type="radio" name='ww' value="狂欢" v-model='checkname '>现在选中的是：{{checkname}}
复制代码

name相同，才能实现单选。

var app = new Vue({el:'#app',data:{checkname:''}
})
复制代码

现在选中谁,就会将其value中的值实时更新。

复选框

单个复选框：

<input v-bind:clicked="onradio" type='checkbox'>
<!-- 用v-model同样可以哦，但是单个单选框是不行的。 -->
复制代码

如果onradio对应的是true，那么效果就像下面这样：

多个复选框

<div id='app'><input value='嘿嘿' v-model='checkboxName' type='checkbox'><input value='哈哈' v-model="checkboxName" type='checkbox'><input value='啵啵' v-model='checkboxName' type='checkbox'>{{checkboxName}}
</div>
复制代码

var app = new Vue({el:'#app',data:{checkboxName:[]        //注意这里是数组哦，因为使用字符串的话就是bool值了，click one is all}
})
复制代码

下拉框

单个下拉框

<select id='app' v-model='selected'><option value='哈哈'>哈哈</option><option value='嘿嘿'>嘿嘿</option><option value='啵啵'>啵啵</option>
</select>
复制代码

var app = new Vue({el:'#app',data:{selected:''    //数组也可以哦}
})
复制代码

多个下拉框

多个下拉框时只要在<select>元素中加入一个属性multiple即可。其初始化值即可是数组也可是字符串。只要按住ctrl键即可多选：

建议单选初始化给字符串，因为此时初始化绑定的是布尔值或者字符串；多选初始化的时候给数组。

绑定值

1. 单个按钮不能用v-model，只能用v-bind.
2. 复选框

<input id="app" type="checkbox" v-model="toggle" :true-value='tvalue' :false-value="fvalue"> {{toggle}} <br>被选中 ---{{toggle === tvalue}} <br>未被选中---{{toggle === fvalue}}
复制代码

 var app = new Vue({el:'#app',data:{toggle:true,tvalue:"我被选中了"，fvalue:'我没被选中'}})
复制代码

3. 给下拉框绑定value值对option没有影响。