用vue3语法写一个登录模块
时间: 2024-09-18 12:04:32 浏览: 28
在 Vue3 中创建一个简单的登录模块,你可以使用 Composition API 来管理状态和行为。下面是一个基本的示例:
```html
<template>
<div class="login-form">
<input v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button @click.prevent="handleSubmit">登录</button>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
name: 'LoginComponent',
setup() {
const username = ref('');
const password = ref('');
// 模拟登录接口
const handleSubmit = async () => {
try {
await yourLoginApiCall(username.value, password.value);
// 登录成功后跳转或清除错误信息
if (success) {
// 清除状态
username.value = '';
password.value = '';
} else {
// 登录失败,记录错误
error = '登录失败,请检查您的用户名和密码';
}
} catch (error) {
this.error = error.message;
}
};
// 初始化状态
let success = false; // 假设这里有一个真实的登录结果
let error = '';
onMounted(() => {
// 初始状态
username.value = '';
password.value = '';
});
return { username, password, handleSubmit };
},
};
</script>
<style scoped>
.login-form {
display: flex;
flex-direction: column;
}
</style>
```
在这个例子中,我们定义了 `username` 和 `password` 两个响应式数据用于存储用户输入,`handleSubmit` 函数模拟了一个异步的登录请求。如果登录成功,会清空输入框并处理后续逻辑;如果出错则显示错误信息。