Vue-cli实战项目6 登陆页实现

最新推荐文章于 2024-06-26 21:03:00 发布

若依不弃

最新推荐文章于 2024-06-26 21:03:00 发布

阅读量674

点赞数

分类专栏： vue nodejs

本文链接：https://blog.csdn.net/weixin_42213903/article/details/103158714

版权

vue 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

nodejs

15 篇文章 1 订阅

订阅专栏

文章目录

上一章节

Vue-cli实战项目5 vue-route的再次封装

布局

使用了Bootstrap的网格布局
Bootstrap的网格布局API

组件

Bootstrap卡片API
Element表单API

在这里插入图片描述

完整代码

<template>
	<div class="container">
		<div class="row">
			<div class="col-12 col-sm-10 col-md-7 col-lg-5 m-auto pt-5" style="height: 500px">
				<div class="card mt-5">
					<div class="card-header bg-white">
						<h3 class="text-center mb-0 text-secondary">UNI-ADMIN</h3>
					</div>
					<div class="card-body">
						<el-form ref="form" :model="form">
							<el-form-item>
								<el-input v-model="form.username" size="medium" placeholder="请输入用户名"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="form.password"  size="medium" placeholder="请输入密码" 
								type="password">
								</el-input>	
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="medium" class="w-100">登陆</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return {
				form: {
					username:"",
					password:""
				}
			}
		},
	}
</script>

<style>
</style>