<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <form @submit.prevent="demo"> <label for="demo">账号:</label> <input type="text" id="demo" v-model="userInfo.account"><br> <label for="pwd">密码:</label> <input type="password" id="pwd" v-model="userInfo.password"><br> 性别: 男<input type="radio" name="gender" v-model="userInfo.gender" value="male"> 女<input type="radio" name="gender" v-model="userInfo.gender" value="female"><br> hobby: learning <input type="checkbox" v-model="userInfo.hobby" value="learning"> gamming <input type="checkbox" v-model="userInfo.hobby" value="gamming"> shopping <input type="checkbox" v-model="userInfo.hobby" value="shopping"><br> books <select v-model="userInfo.books"> <option value="">chose your book</option> <option value="swdj">死亡赌局</option> <option value="cjsj">超级手机</option> <option value="xyxyx">逍遥小医仙</option> <option value="jysz">绝印神座</option> </select><br> Others: <textarea ></textarea><br> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a><br> <input type="submit"> </form> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ userInfo:{ account:"", password:"", gender:"male", books:"swdj", hobby:[], agree:"" } }, methods: { demo(){ console.log(JSON.stringify(this.userInfo)) } }, }) </script> </html>