收集表单数据
源码解析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="demo">
账号：<input type="text" v-model="userInfo.account">
<br>
密码：<input type="password" v-model="userInfo.password">
<br>
年龄：<input type="number" v-model.number="userInfo.age">
<br>
性别：
<input type="radio" v-model="userInfo.sex" name="sex" value="male">男
<input type="radio" v-model="userInfo.sex" name="sex" value="female">女
<br>
爱好：
<input type="checkbox" v-model="userInfo.hobby" value="eat">吃饭
<input type="checkbox" v-model="userInfo.hobby" value="sleep">睡觉
<input type="checkbox" v-model="userInfo.hobby" value="work">工作
<br>
所属地区：
<select v-model="userInfo.city">
<option value="">请选择地区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shanxi">山西</option>
</select>
<br>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea>
<br>
<input type="checkbox" v-model="userInfo.isRead">阅读并接受<a href="">用户协议</a>
<br>
<button>提交</button>
</form>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
userInfo:{
account:'',
password:'',
age:'',
sex:'',
hobby:[],
city:'',
others:'',
isRead:''
}
},
methods:{
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
});
</script>
</body>
</html>
