一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
我要一步一步往上爬~大家好，今天我们来一起学习一下vue v-model双向数据绑定的应用
这里举个收集表单信息的例子来帮助理解：
结果展示：
解释：
form表单是有个action属性的，它指定表单提交到指定地址，，我们这里不会往一个地址跳转而是作为一个元素的呈现通过ajax把数据发给后端，页面不用刷新就可以获取或是发送数据。
这里的账号+text文本框还可以写成这种形式：<label for="demo">账号：</label> <input type="text" id="demo"> 通过id和for把他们关联了起来，这样就能够点击账号文字本身实现聚焦文本框输入文字的效果,这是一种交互性较强的表单写法
代码中年龄：<input type="number" v-model.number="userInfo.age">添加.number修饰符可以控制输入的类型为number，输入的字符串转为有效的数字
代码中账号：<input type="text" v-model.trim="userInfo.account">添加.trim修饰符可以实现去掉头尾的空格，防止空字符被无意义读取
代码中<textarea v-model.lazy="userInfo.other"></textarea>添加.lazy修饰符可以实现在失去焦点后再收集数据，适合没有实时收集数据的需求
v-model默认收集输入框中的value值，所以这里的账号和密码的输入就是value，无需额外配置value值
这里的男和女使用了radio类型单选，通过name属性指定他们是一组的，不然两个可以都勾选上，那到底是什么性别呢？像这样的勾选值是需要配置value值的，不然读取出来的就是null。
最后的多选框也是用户不能输入文字的地方，所以也是需要配置value值，这里默认读取的是某个标签的cheked值，v-model双向绑定后，后台的hooby在一个属性被勾选后就会变成true，如果不配置value值，那么其他两个框框也会因为双向绑定全部被自动勾选
需要注意的是：这里的hobby的初始值必须要是数组类型！因为hobby的初始值会影响收集回来的数据。
总结：
- 如果
<input type="text"/>，v-model收集的直接是用户输入的value值 - 如果
<input type="radio"/>，则v-model收集的是value值，需要配置value值 - 如果
<input type="checkbox"/>
- 没有配置value属性，收集的就是checked（布尔值,要么全选，要么全不选）
- 配置了value属性:
- v-model的初始值是非数组，收集的就是checked (布尔值,要么全选，要么全不选）
- v-model的初始值是数组，收集的就是value组成的数组
