登录界面代码

<template>
    <div class="container">
        <el-col :sm="12" :lg="6" :xl="4">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"><!--ref="formRef"中formRef表示el-form为整个对象-->
                <el-form-item label="Username" prop="username">
                    <el-input v-model="form.username" placeholder="Enter username"></el-input>
                </el-form-item>
                <el-form-item label="Password" prop="password">
                    <el-input v-model="form.password" placeholder="Enter password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">Login</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { reactive } from 'vue'
import { ref } from 'vue'
const formRef = ref()

const router = useRouter()
const form = reactive({
    username: '',
    password: ''
})
const rules = reactive({
    username: [
        { required: true, message: 'Please enter username', trigger: 'blur' }
    ],
    password: [
        { required: true, message: 'Please enter password', trigger: 'blur' }
    ]
})
const submitForm = async () => {
    await (formRef.value as any).validate()
    if (form.username === 'admin' && form.password === '123456') {
        router.push({ name: 'Home' })
    } else {
        ElMessage.error('Login failed')
    }
}
</script>
<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
  • 数据双向绑定v-model="form.username"和form数据对象中的username数据双向绑定
  • :model="form" 表示这个el-form和对象form绑定
  • 表单验证，:rules="rules"和ref="formRef"，rules定义验证规则，formRef 的最终目的拿到了 el-form 的实例，调用它提供的 API 方法实现：validate() : 触发表单验证（检查必填项、格式等）。resetFields() : 重置表单项，将其值重置为初始值。clearValidate() : 移除表单项的校验结果。
const form = reactive({
    username: '',
    password: ''
})

<el-form :model="form" >
    <el-form-item label="Username" prop="username">
        <el-input v-model="form.username" placeholder="请输入账号"></el-input>
    </el-form-item>
    <el-form-item label="Password" prop="password">
         <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
    </el-form-item>
    <el-form-item>
         <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
</el-form>