表单数据收集
表单数据收集是最常用的逻辑；
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"><br><br>
密码：<input type="password" v-model="userInfo.password"><br><br>
年龄：<input type="number" v-model.number="userInfo.age"><br><br>
性别：
男<input type="radio" name="gender" v-model="userInfo.gender" value="男">
女<input type="radio" name="gender" v-model="userInfo.gender" value="女"><br><br>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="学习">
电影<input type="checkbox" v-model="userInfo.hobby" value="电影">
旅游<input type="checkbox" v-model="userInfo.hobby" value="旅游"><br><br>
城市：
<select v-model="userInfo.city">
<option value="">所在城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="长沙">长沙</option>
<option value="武汉">武汉</option>
</select>
<br><br>
其他信息：<br><textarea v-model.lazy="userInfo.other"></textarea><br><br>
<input type="checkbox" v-model="userInfo.agree">阅读并接受
<a href="http://www.51cto.com">《用户协议》</a><br><br>
<button>提交</button>
</form>
</div>
提示1：@submit.prevent="demo" 绑定提交事件，没绑定在 btn 上，绑在 form 上，使用了 prvent 修饰符，阻止默认提交行为，一般表单数据都通过 AJAX 发走了；
提示2：账号、密码和年龄的 type 分别是 text、password和number，这个好理解，都分别绑定了 v-model数据双向绑定，trim 是 v-model 的修饰符，意思是去掉两边的空格；
提示3：性别，男女，注意 type 是 radio ，还要指定 name 才能成组，指定 value 才有取值，设置了默认值；
提示4：爱好，注意 type 是 checkbox ，指定了 value ；
提示5：城市，type 是 select ，v-model 绑定在了 select 上，就可以实现响应式；
提示6：其他信息，使用了 修饰符 lazy 是指当这里信息录入完，焦点跳出后再响应式，否则录入一个响应一个，会影响性能；
提示7：阅读并接受，只有单一复选框，不需要做成数组，默是 布尔值；
new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age:18,
gender: '女',
hobby: [],
city: '北京',
other: '',
agree: ''
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo));
}
},
})提示1：把所有数据都放在 userInfo 这个层级中，放便使用 JSON.stringiy() 转换数据；
提示2：年龄使用了数字类型，给了默认值；
提示3：爱好是多个复选框，可多选，所以做成数组来存储信息；
看下收集的效果：
提交后生成的 JSON ：
【收集表单数据】
若：<input type="text"/>，则 v-model 收集的是 value 值，用户输入的就是 value 值；
若：<input type="radio"/>，则 v-model 收集的是 value 值，且要给标签配置 valuse 值；
若：<input type="checkbox"/>
1）没有配置 input 的 value 属性，那么收集的就是 checked （勾选 或 不勾选，是布尔值）；
2）配置 input 的 value 属性：
1、v-model 的初始值是非数组，那么收集的就是 checked （勾选 或 不勾选，是布尔值）
2、v-model 的初始值是数组，那么收集的就是 value 组成的数组；
备注：v-moel 的三个修饰符：
1）lazy：失去焦点再收集数据；
2）number： 输入字符串转为有效的数字；
3）trim：输入着尾空格过滤；