位置: IT常识 - 正文
【登录界面】vue、element-ui登录界面模板(vue登录页面点击登录进入首页)
编辑：rootadmin【登录界面】vue、element-ui登录界面模板 vue、element-ui登录界面模板
本文链接地址:https://www.jiuchutong.com/zhishi/285114.html
转载请保留说明！
推荐整理分享【登录界面】vue、element-ui登录界面模板(vue登录页面点击登录进入首页)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue登录界面设计,vue 登陆,vue 登陆,vue实现简单的登录页面,vue 登录界面,登录页面vue,登录页面vue,vue 登录界面,内容如对您有帮助，希望把文章链接给更多的朋友！
这里总结一个用vue、element-ui写的登录界面，为以后复制粘贴备用。
截图
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录</title><!--引入js--> <script src="../../js/vue.js"></script> <script src="../../js/jquery-3.6.0.js"></script> <!--引入element-ui--> <!-- 引入样式 --> <link rel="stylesheet" href="../../css/Eleindex.css"> <!-- 引入组件库 --> <script src="../../js/Eleindex.js"></script></head><body><div id="app"> <el-container> <el-header>XXXX</el-header> <!--主体内容--> <el-main> <el-row> <el-col :span="8" :offset="8"> <div id="loginBox"> 用户登录<br> 账号：<el-input v-model="adminUser.username" placeholder="账号"></el-input><br> 密码：<el-input type="password" v-model="adminUser.password" placeholder="密码"></el-input><br> <el-button type="primary" @click="y_reset">重置</el-button> <el-button type="primary" @click="y_login">登录</el-button> </div> </el-col> </el-row> </el-main> <el-footer>Copyright © 2022xxxx all rights reserved</el-footer> </el-container></div></body></html><style> /*整体样式*/ *{ margin: 0; padding: 0; } body,html,.el-container,#app{ height: 100%; } /*放账号密码input的div*/ #loginBox{ background-color: #eee; border-radius: 15px; margin-top: 15%; } /*布局容器样式 main header fotter*/ .el-header { background-color:deepskyblue; color: #fff; text-align: center; line-height: 60px; font-size: xx-large; font-weight: bolder; } .el-footer{ background-color: #bbb; color: #000; text-align: center; line-height: 60px; } .el-main { background-color: #fff; color: #333; text-align: center; line-height: 80px; }/* 输入框样式*/ .el-input{ width: 50%; }</style><script> var app=new Vue({ el:"#app", data:{ adminUser:{}, }, methods:{ y_reset(){//重置 this.adminUser={}; }, y_login(){//点击登录按钮后发送ajax请求给后端进行账号密码比对 this.post01(); } } });</script>