收集表单数据：
若<input type="text"/>,则v-model收集的是value值，用户输入的就是value值
若<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值
若<input type="checkbox"/>
1、没有配置input的value属性，那么收集到的就是checked（勾选or未勾选 是布尔值）
2、配置input的value属性：
1、v-model的初始值是非数组，那么收集到的就是checked（勾选or未勾选 是布尔值）
2、v-model的初始值是数组，那么收集到的就是value组成的数组
备注： v-model 的三个修饰符：
lazy: 失去焦点再收集数据
number： 输入的字符串转为有效的数字
trim：输入首尾空格过滤
<body>
<div id="root">
<form @submit.prevent="submit">
账号：<input type="text" v-model="personInfo.username"><br><br>
密码：<input type="password" v-model="personInfo.password"><br><br>
性别：
男：<input type="radio" v-model="personInfo.sex" value="man">
女：<input type="radio" v-model="personInfo.sex" value="women">
<br><br>
爱好：
Vue <input type="checkbox" v-model="personInfo.hobby" value="Vue">
JS <input type="checkbox" v-model="personInfo.hobby" value="JS">
JAVA <input type="checkbox" v-model="personInfo.hobby" value="JAVA">
<br><br>
城市：
<select v-model="personInfo.city">
<option value="">请选择你的城市</option>
<option value="beijing">北京</option>
<option value="jiangxi">江西</option>
<option value="guangzhou">广州</option>
</select>
<br><br>
其他信息：
<textarea v-model="personInfo.other"></textarea>
<br><br>
<input type="checkbox" v-model="personInfo.agree">
我已详细阅读该协议<a href="javascript:;">《协议》</a>
<br><br>
<button type="submit">提交</button>
</form>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
personInfo:{
username:"",
password:"",
sex:"",
hobby:[],
city:"",
other:"",
agree:""
}
},
methods:{
submit(){
console.log(JSON.stringify(this.personInfo));
}
}
})
</script>
</body>
