记录一下,为了以后方便,若有需要请自取
<!DOCTYPE html> <html> <head> <title>Title</title> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app" style="display: flex;justify-content: center;" > <!--设立一个div--> <div> <h2>注册表单</h2> <br> <!--input的应用--> <label>用户名称</label> <input v-model="username" placeholder="用户名称"><br><br> <label>密码</label> <input v-model="password" type="password" placeholder="输入密码"><br><br> <label>重复输入密码</label> <input type="password" v-model="rePassword" placeholder="重复输入密码"><br><br> <label>性别</label> <input type="radio" id="male" value="male" v-model="sex"> <label for="male">male</label> <input type="radio" id="female" value="female" v-model="sex"> <label for="female">female</label><br><br> <label>爱好</label> <input type="checkbox" id="basketball" value="蓝球" v-model="hobby"> <label for="basketball">篮球</label> <input type="checkbox" id="football" value="足球" v-model="hobby"> <label for="football">足球</label> <input type="checkbox" id="other" value="其他" v-model="hobby"> <label for="other">其他</label><br><br> <label>职业</label> <select v-model="work"> <option disabled value="">请选择</option> <option>学生</option> <option>工作</option> <option>其他</option> </select><br><br> <label>备注</label> <textarea v-model="note" placeholder="备注"></textarea><br><br> <input @keyup.enter="submit"> <button v-on:click="submit" >提交</button> </div> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { username: '', password: '', rePassword: '', sex: '', hobby: [], work: '', note: '' }, methods: { submit() { if (this.password === this.rePassword) { let con = confirm("用户名:" + this.username + ' 性别:' + this.sex + ' 爱好:' + this.hobby.join('-') + ' 职业:' + this.work + ' 备注:' + this.note); if (con) alert("提交成功"); else alert("取消提交"); }else { alert("两次密码输入不一致!") } } } }) </script> </body> </html>