Vue写一个登录组件,给出代码
时间: 2024-01-31 21:02:18 浏览: 49
以下是一个简单的Vue登录组件的代码,包含了表单验证和登录功能:
```html
<template>
<div>
<form @submit.prevent="login">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" :class="{'is-invalid': errors.username}">
<div class="invalid-feedback" v-if="errors.username">{{ errors.username }}</div>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" :class="{'is-invalid': errors.password}">
<div class="invalid-feedback" v-if="errors.password">{{ errors.password }}</div>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
errors: {}
}
},
methods: {
validateForm() {
let isValid = true;
this.errors = {};
if (!this.username) {
this.errors.username = '请输入用户名';
isValid = false;
}
if (!this.password) {
this.errors.password = '请输入密码';
isValid = false;
}
return isValid;
},
login() {
if (!this.validateForm()) {
return;
}
// 调用登录接口,返回结果处理
}
}
}
</script>
<style>
.is-invalid {
border-color: red;
}
.invalid-feedback {
color: red;
font-size: 12px;
}
</style>
```
在这个组件中,我们利用了Vue的双向数据绑定功能,将表单的输入值与组件的data属性绑定起来。在提交表单时,我们会先调用validateForm方法来验证表单输入的合法性,如果有错误会将错误信息存储在errors对象中,并在页面上显示。如果表单验证通过,则调用login方法来处理登录逻辑。