收集表单数据:
若:，则v-model收集的是value值，用户输入的就是value值。
若:，则v-model收集的是value值，且要给标签配置value值
若:
1.没有配置input的value属性，那么收集的就是checked(勾选or 未勾选，是布尔值)
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked(勾选or 未勾选，是布尔值)
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>收集表单数据</title><script src="../js/vue.js"></script><style>#root{padding:10px;}#root form{clear: both;width:500px;margin:0px auto;}#root .rows{clear: both;padding-bottom:15px;}#root .rows label{}#root .rows input{}.ml{margin-left: 100px;}</style></head>
<body>
<div id="root"><form @submit.prevent="demo1"><div class="rows"><label for="zhanghao">账号：</label><input type="text" id="zhanghao" v-model.trim="userInfo.account"/></div><div class="rows"><label>密码：</label><input type="password" v-model="userInfo.password"/></div><div class="rows"><label>年龄：</label><input type="number" v-model.number="userInfo.age"/></div><div class="rows"><label>性别：</label>男<input type="radio" name="sex" v-model="userInfo.sex" value="male"/>女<input type="radio" name="sex" v-model="userInfo.sex" value="female"/></div><div class="rows"><label>爱好：</label><input type="checkbox" v-model="userInfo.hobby" value="1"/>打羽毛球 <input type="checkbox" v-model="userInfo.hobby" value="2"/> 读书 <input type="checkbox" v-model="userInfo.hobby" value="3"/>画画 <input type="checkbox" v-model="userInfo.hobby" value="4"/>吃饭</div><div class="rows"><label>所属校区：</label><select v-model="userInfo.city"><option value="">请选择校区</option><option value="1">北京校区</option><option value="2">上海校区</option><option value="3">深圳校区</option><option value="4">茅台校区</option></select></div><div class="rows"><label>备注信息：</label><textarea v-model.lazy="userInfo.infos"></textarea></div><div class="rows"><input type="checkbox" v-model="userInfo.agree"/>阅读并接受<a href="javascript:;">《用户协议》</a></div><div class="rows"><button>提交</button></div></form>
</div><script type="text/javascript">Vue.config.productTip = false; //阻止 vue在控制点生成生产提示信息// 使用 computed 计算属性实现const vm = new Vue({el:'#root',data:{userInfo:{account:'',password:'',age:18,sex:'',hobby:[],city:'',infos:'',agree:''}},methods:{demo1(){alert('提交了');console.log("表单数据"+this.account)console.log("Data"+ JSON.stringify(this.userInfo))}}})
</script>
</body>
</html>
