做vlogger的网站有哪些,自然堂网站建设策划书,网络营销案例分析与实践,网站建设那种语言好个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大二在校生 #x1f921; 个人主页#xff1a;坠入暮云间x #x1f43c;座右铭#xff1a;懒惰受到的惩罚不仅仅是自己的失败#xff0c;还有别人的成功。 #x1f385;**学习目标: 坚持每一次的学习打卡 文章… 个人名片 作者简介一名大二在校生 个人主页坠入暮云间x 座右铭懒惰受到的惩罚不仅仅是自己的失败还有别人的成功。 **学习目标: 坚持每一次的学习打卡 文章目录 用户注册页面 对于网页的注册页面想必大家都比较熟悉。每一个注册页面都有大量的表单元素当用户输入完成页面所有的注册时单机提交按钮程序将收集所有的注册页面信息然后将转换成JSON字符串最后再调用AJAX发送数据到服务器。通过vue的学习我们将用V-model来完成项目练习 首先通过如下指令创建vue3项目 npm init vitelatest registration-form一般完成一个注册页面都应该具备如下信息
用户名(usernam)邮箱(email)密码(password)手机号(phone)性别(gender)学历(education)同意协议(agree)
用户注册页面
script setup langts
import { reactive } from vue;interface User {username: string;password: string;email: string;gender: number;phone: string;education: number;agree: boolean;
}
const user reactiveUser({username: ,password: ,email: ,gender: 0,phone: ,education: 0,agree: false,
});
const submit () {console.log(user);}
/script
templatediv idcontainerspan用户注册页面/spanform actiontabletrtd用户名/tdtdinput typetext v-modeluser.username/td/trtrtd密码/tdtdinput typepassword v-modeluser.password/td/trtrtd邮箱/tdtdinput typeemail v-modeluser.email/td/trtrtd性别/tdtdinput typeradio namegender value1 v-modeluser.gender男input typeradio namegender value2 v-modeluser.gender女/td/trtrtd手机号/tdtdinput typetext name id v-modeluser.phone/td/trtrtd学历/tdtdselect nameeducation ideducation v-modeluser.educationoption value0请选择/optionoption value1博士/optionoption value2硕士/optionoption value3学士/optionoption value4高中/option/select/td/trtrtdinput typecheckbox name id v-modeluser.agree是否同意a href#网站协议/a/td/trtrtdbutton typesubmit click.preventsubmit提交/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将每一个表单元素双向绑定了user属性最后“提交”按钮绑定了一个sumbit方法用来处理表单提交操作还是用了.prevent修饰符来组织表单默认事件。至此一个简单的表单注册页面完成大家可以一起练习 运行出来的页面如下 可以在页面中输入数据提交用户信息后将传入后台
