[VUE]测试平台登录页实现

最新推荐文章于 2023-11-30 17:11:48 发布

weixin_42577503

最新推荐文章于 2023-11-30 17:11:48 发布

阅读量193

点赞数

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42577503/article/details/127398497

版权

本文将介绍如何利用Vue.js框架来构建一个完整的登录页面。通过组件化的方式，详细讲解了从界面设计到功能实现的过程，包括输入验证、登录请求等关键步骤。

摘要由CSDN通过智能技术生成

基于VUE组件完成登录页

<template>
	<div class="login_box">
		<div class="title"><img src="../assets/images/login.jpeg"></div>
		<el-form :model="loginForm" :rules="loginRules" ref="loginRef">
			<el-form-item label="账号" prop="username">
				<el-input v-model="loginForm.username" >
					<template #prefix>
						<el-icon :size="20">
							<User />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="loginForm.password" type="password" >
					<template #prefix>
						<el-icon :size="20">
							<Lock />
						<