<!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"> <script type="text/javascript" src="../js/vue.js"></script> <title>表单数据收集</title> </head> <body> <div id="root"> <form @submit.prevent="demo"> <!-- <label for="dem">账号</label> --> 账号 <input type="text" v-model="account"><br><br/> <br/> 密码 <input type="text" v-model="password"> <br><br/> <br/> 性别 男<input type="radio" name="sex" value="male" v-model="sex"> 女 <input type="radio" name="sex" value="fanale" v-model="sex"> <br/><br/> 爱好 抽烟 <input type="checkbox" v-model="hobby" value="shouyan"> 喝酒 <input type="checkbox" v-model="hobby" value="hejiu"> 烫头 <input type="checkbox" v-model="hobby" value="tangtou"> <br/> <br/> 地区 <select v-model="city"> <option value="">清选择地区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shijiazhuang">石家庄</option> </select> <br> 其他信息 <textarea v-model="other"></textarea> <br/> <input type="checkbox" v-model="agree"> 阅读并接受协议<a href="https://www.baidu.com/">《用户协议》</a> <button>提交</button> </form> </div> <script> const vm=new Vue({ el:"#root", data:{ account:"", password:"", sex:"male", hobby:[], city:"beijing", other:"", agree:"", }, methods: { demo(){ console.log(JSON.stringify(this._data) ) } }, }) </script> </body> </html>