vue3登录页面简单
时间: 2024-09-11 17:10:45 浏览: 17
Vue3中的登录页面通常包含以下几个基本组件和功能:
1. **HTML模板**:
```html
<template>
<div class="login-form">
<input v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button @click="handleSubmit">登录</button>
<span v-if="error" class="error-message">{{ errorMessage }}</span>
</div>
</template>
```
2. **Vue组件**:
```javascript
<script setup>
import { ref } from 'vue';
const username = ref('');
const password = ref('');
let error = false;
let errorMessage = '';
function handleSubmit() {
if (username.value === '' || password.value === '') {
error = true;
errorMessage = "请输入完整的用户名和密码";
} else {
// 这里假设你有发送请求到API的实际逻辑
// axios.post('/api/login', { username: username.value, password: password.value })
// .then(() => {
// // 登录成功,可以重定向到其他页面
// router.push('/dashboard');
// })
// .catch((err) => {
// // 处理登录失败的情况
// error = true;
// errorMessage = err.message;
// });
}
}
</script>
```
3. **CSS样式**(可选):
```css
.login-form {
display: flex;
flex-direction: column;
}
.error-message {
color: red;
}
```
在这个例子中,用户输入用户名和密码,点击登录按钮会验证表单是否填写完整,并尝试发送登录请求到服务器。如果验证失败或登录请求失败,错误信息会被显示出来。