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