vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍

v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。

下面我们看看v-model 在各类表单元素上的用法：

<script>
    let my=new Vue({
        el:"#my",
        data:{
            va:'',
            flag:["blank"],
            flagN:["singing"],
            radioGender:"male",
            items:[
                {text:'请选择',value:''},
                {text:'北京',value:'beijin'},
                {text:'上海',value:'shanghai'},
                {text:'广州',value:'guangzhou'},
                {text:'深圳',value:'shenzhen'}
            ],
            selected:'',
            meg:'',
            num:''
        }
    })
</script>

文本框

<input type="text" v-model="va">
<input type="button" value="提交" :disabled="va==''" >{{va}}

复选框

<input type="checkbox" v-model="flag" value="blank"/>空{{flag}}

复选框组

<input type="checkbox" v-model="flagN" value="singing" />唱歌
<input type="checkbox" v-model="flagN" value="dancing" />跳舞
<input type="checkbox" v-model="flagN" value="drawing" />画画
<span>{{flagN}}</span>

单选框组

<input type="radio" v-model="radioGender" name="gender" value="male" />男
<input type="radio" v-model="radioGender" name="gender" value="female" />女
{{radioGender}}

下拉框

<select name="city" id="city" v-model="selected">
    <option v-for="item in items" :value="item.value">{{item.text}}</option>
</select>
<span>{{selected}}</span>

修饰符

<input type="text" v-model.trim="meg"/>
<input type="number"  v-model.trim="num"/>