Vue学习之路（四）---v-model（双向数据绑定）与表单

v-model具有双向数据绑定的功能，可以绑定数组和字符串，不过，在绑定之前，需要将我们需要绑定的数据进行初始化。
1.当输入框的值改变时，{{value}}中的值会跟着改变

//html
 <input type="text" v-model="value" value="apple"/>
    {{value}}
//data
data () {
  value: ''
}

2.input为checkbox时，点击勾选框，v-model会自动将value值添加到valueArr中

//html
 <input type="checkbox" v-model="valueArr" value="apple"/>
 <input type="checkbox" v-model="valueArr" value="orange"/>
 <input type="checkbox" v-model="valueArr" value="banana"/>{{valueArr}}
//data
data () {
  valueArr: []
}

结果图

3.当input为单选按钮时
v-model会获取当前一个value或者valueArr的值，然后渲染到页面中

    <input type="radio" v-model="value" value="apple"/>
    <input type="radio" v-model="value" value="orange"/>
    <input type="radio" v-model="value" value="banana"/>{{value}}

结果图

4.v-model中的修饰符
v-model.lazy: 是在输入完成或者失去焦点或者回车之后执行
v-model.trim: 去掉输入框的中的空格
v-model.number: 当输入的是‘11111’，会value自动转变为number类型