用vue+element-ui帮我写一个登陆程序
时间: 2024-05-09 13:17:12 浏览: 65
使用Vue.js和Element-UI做一个简单登录页面的实例
好的,我可以为您提供一些基本的代码示例:
```vue
<template>
<el-form :model="form" ref="loginForm" label-width="80px" class="login-form">
<el-form-item label="账号" prop="username">
<el-input v-model="form.username" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 登录逻辑
console.log('登录成功')
} else {
console.log('登录失败')
return false
}
})
}
}
}
</script>
```
以上代码使用了 ElementUI 的组件实现了一个基本的登录表单。在登录按钮点击时,会触发 `submitForm` 方法,该方法会调用表单的 `validate` 方法进行表单验证,如果通过验证,则执行登录逻辑。您可以根据自己的需求修改代码实现您需要的登录功能。
阅读全文