v-model="loginForm.name"改成v-model="loginForm.username"
<el-form-item prop="username">
<el-input
prefix-icon="iconfont icon-user"
placeholder="请输入用户名"
v-model="loginForm.username"
table="用户名"
></el-input>
</el-form-item>
<template>
<div class="login_container">
<div class="content">
<div class="avater">
<img src="../assets/logo.png" alt="" />
</div>
<!-- 表单区域 -->
<div class="from">
<el-form
label-width="0px"
ref="loginFormRef"
:model="loginForm"
:rules="loginFormRules"
>
<!-- 用户名 -->
<el-form-item prop="username">
<el-input
prefix-icon="iconfont icon-user"
placeholder="请输入用户名"
v-model="loginForm.name"
table="用户名"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
prefix-icon="iconfont icon-lock_fill"
type="password"
placeholder="请输入用户密码"
v-model="loginForm.pwd"
></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLogin">重置</el-button>
</el-form-item>
</el-form>
<div>{{loginForm.name}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
name: '',
pwd: '',
},
//配置验证规则
loginFormRules: {
// 验证用户名是否合法
username: [
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
// 验证密码是否合法
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
},
};
},