注册登录表单

html登录页面：

<!DOCTYPE html> 
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建一个登录页面</title>
<!-- 代码风格 --><!-- <style>* {margin: 0;padding: 0;}html {height: 100%;}body {height: 100%;}.container {height: 100%;background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);}.login-wrapper {background-color: #fff;width: 358px;height: 588px;border-radius: 15px;padding: 0 50px;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);}.header {font-size: 38px;font-weight: bold;text-align: center;line-height: 200px;}.input-item {display: block;width: 100%;margin-bottom: 20px;border: 0;padding: 10px;border-bottom: 1px solid rgb(128, 125, 125);font-size: 15px;outline: none;}.input-item:placeholder {text-transform: uppercase;}.btn {text-align: center;padding: 10px;width: 100%;margin-top: 40px;background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);color: #fff;}.msg {text-align: center;line-height: 88px;}a {text-decoration-line: none;color: #abc1ee;}</style> --></head><body><!-- <div class="container"> --><div id="app"><form><table border="0"><tr><td>用户名:</td><td><input type="text"name="username"v-model="user.username"></td></tr><tr><td>密码:</td><td><input type="password"name="password"v-model="user.password"></td></tr><tr><td>性别:</td><td><input type="radio"name="gender"value="1"v-model="user.gender">男<input type="radio"name="gender"value="0"v-model="user.gender">女</td></tr><tr><td>密码问题:</td><td><input type="text"name="pwdQuestion"v-model="user.pwdQuestion"></td></tr><tr><td>密码答案:</td><td><input type="text"name="pwdAnswer"v-model="user.pwdAnswer"></td></tr><tr><td><input type="submit"value="注册"@click.prevent="register"></td><td><input type="reset"value="重填"></td></tr></table></form></div><script>const vm = Vue.createApp({data(){return{user:{username:'',password:'',gender:'',email:'',pwdQuestion:'',pwdAnswer:''}}},method:{register:funtion(){console.log(this.user);}}}).mount('#app');</script></body>
</html>

添加css样式：

<!DOCTYPE html> 
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建一个登录页面</title>
<!-- 代码风格 --><style>* {margin: 0;padding: 0;}html {height: 100%;}body {height: 100%;}.container {height: 100%;background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);}.login-wrapper {background-color: #fff;width: 358px;height: 588px;border-radius: 15px;padding: 0 50px;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);}.header {font-size: 38px;font-weight: bold;text-align: center;line-height: 200px;}.input-item {display: block;width: 100%;margin-bottom: 20px;border: 0;padding: 10px;border-bottom: 1px solid rgb(128, 125, 125);font-size: 15px;outline: none;}.input-item:placeholder {text-transform: uppercase;}.btn {text-align: center;padding: 10px;width: 100%;margin-top: 40px;background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);color: #fff;}.msg {text-align: center;line-height: 88px;}a {text-decoration-line: none;color: #abc1ee;}</style></head><body><div class="container"><div id="app"><form><table border="0"><tr><td>用户名:</td><td><input type="text"name="username"v-model="user.username"></td></tr><tr><td>密码:</td><td><input type="password"name="password"v-model="user.password"></td></tr><tr><td>性别:</td><td><input type="radio"name="gender"value="1"v-model="user.gender">男<input type="radio"name="gender"value="0"v-model="user.gender">女</td></tr><tr><td>密码问题:</td><td><input type="text"name="pwdQuestion"v-model="user.pwdQuestion"></td></tr><tr><td>密码答案:</td><td><input type="text"name="pwdAnswer"v-model="user.pwdAnswer"></td></tr><tr><td><input type="submit"value="注册"@click.prevent="register"></td><td><input type="reset"value="重填"></td></tr></table></form></div><script>const vm = Vue.createApp({data(){return{user:{username:'',password:'',gender:'',email:'',pwdQuestion:'',pwdAnswer:''}}},method:{register:funtion(){console.log(this.user);}}}).mount('#app');</script></body>
</html>