1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>收集表单数据</title>
    6.     <script src="../js/vue.js"></script>
    7.   </head>
    8.   <body>
    9.     <div id="app">
    10.       <h1>{{msg}}</h1>
    11.       <form @submit.prevent="send">
    12.         <label for="username">用户名：</label>
    13.         <input id="username" type="text" v-model.trim="user.username"><br><br>
    14.         密码：<input type="password" v-model="user.password"><br><br>
    15.         年龄：<input type="number" v-model.number="user.age"><br><br>
    16.         性别：
    17.         男<input type="radio" name="gender" v-model="user.gender" value="1">
    18.         女<input type="radio" name="gender" v-model="user.gender" value="0"><br><br>
    19.         爱好：
    20.         运动<input type="checkbox" name="interest" value="sport" v-model="user.interest">
    21.         旅游<input type="checkbox" name="interest" value="travel" v-model="user.interest">
    22.         唱歌<input type="checkbox" name="interest" value="sing" v-model="user.interest"><br><br>
    23.         学历：
    24.         <select v-model="user.grade">
    25.           <option value="">请选择学历</option>
    26.           <option value="zk">专科</option>
    27.           <option value="bk">本科</option>
    28.           <option value="ss">硕士</option>
    29.         </select><br><br>
    30.         简介：<textarea cols="30" rows="10" v-model.lazy="user.introduce"></textarea><br><br>
    31.         <input type="checkbox" v-model="user.isAgree">阅读并接受协议<br><br>
    32.         <button>注册</button>
    33.       </form>
    34.     </div>
    35.     <script>
    36.       const vm = new Vue({
    37.         el : '#app', 38. data : {
    38.           msg : '收集表单数据', 40. user : {
    39.             username : '', 42. password : '', 43. age : '', 44. gender : '0', 45. interest : ['sport'], 46. grade : 'ss', 47. introduce : '', 48. isAgree : '' 49. }
    40.         }, 51. methods : {
    41.           send(){
    42.             console.log(JSON.stringify(this.user))
    43.           }
    44.         }
    45.       })
    46.     </script>
    47.   </body>
    48. </html>

    页面展示效果：
    image.png
    运行结果：
    image.png