0
点赞
收藏
分享

微信扫一扫

09-Vue基础之实现注册页面

千行 2023-10-20 阅读 32

文章目录

首先通过如下指令创建vue3项目

 npm init vite@latest registration-form

一般完成一个注册页面都应该具备如下信息:

  1. 用户名(usernam)
  2. 邮箱(email)
  3. 密码(password)
  4. 手机号(phone)
  5. 性别(gender)
  6. 学历(education)
  7. 同意协议(agree)

用户注册页面

<script setup lang="ts">
import { reactive } from 'vue';

interface User {
  username: string;
  password: string;
  email: string;
  gender: number;
  phone: string;
  education: number;
  agree: boolean;
}
const user = reactive<User>({
  username: '',
  password: '',
  email: '',
  gender: 0,
  phone: '',
  education: 0,
  agree: false,
});
const submit = () => {
  console.log(user);

}
</script>
<template>
  <div id="container">
    <span>用户注册页面</span>
    <form action="">
      <table>
        <tr>
          <td>用户名:</td>
          <td>
            <input type="text" v-model="user.username">
          </td>
        </tr>
        <tr>
          <td>密码:</td>
          <td>
            <input type="password" v-model="user.password">
          </td>
        </tr>
        <tr>
          <td>邮箱</td>
          <td>
            <input type="email" v-model="user.email">
          </td>
        </tr>
        <tr>
          <td>性别</td>
          <td>
            <input type="radio" name="gender" value="1" v-model="user.gender"><input type="radio" name="gender" value="2" v-model="user.gender"></td>
        </tr>
        <tr>
          <td>手机号:</td>
          <td>
            <input type="text" name="" id="" v-model="user.phone">
          </td>
        </tr>
        <tr>
          <td>学历</td>
          <td>
            <select name="education" id="education" v-model="user.education">
              <option value="0">请选择</option>
              <option value="1">博士</option>
              <option value="2">硕士</option>
              <option value="3">学士</option>
              <option value="4">高中</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="" id="" v-model="user.agree">是否同意<a href="#">网站协议</a>
          </td>
        </tr>
        <tr>
          <td>
            <button type="submit" @click.prevent="submit">提交</button>
          </td>
        </tr>
      </table>
    </form>
  </div>
</template>
<style>
* {
  margin: 0 auto;
  padding: 0;
}
#app {
  font-family: Arial, Helvetica, sans-serif;
  color: #2c3e50;
  margin: 50px;
  
  border: 1px black solid;
  border-radius: 20px;
  display: flex;
  justify-content: center;
}

form {
  display: flex;
  justify-content: center;
  text-align: justify;
  /* margin-top: 40px; */
}

 
button{
 position: relative;
 right: -80px;
}
</style>

运行出来的页面如下:
可以在页面中输入数据,提交用户信息后将传入后台
在这里插入图片描述

在这里插入图片描述

举报

相关推荐

0 条评论