用vue3编写一个前端登录界面
时间: 2023-08-04 18:11:37 浏览: 42
好的,以下是用Vue3编写的前端登录界面示例:
```
<template>
<div class="login-container">
<h2>Login</h2>
<form>
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" />
</div>
<button type="submit" @click.prevent="submitForm">Login</button>
<p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
</form>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'Login',
setup() {
const username = ref('');
const password = ref('');
const errorMessage = ref('');
const submitForm = () => {
// Validate the form fields
if (!username.value || !password.value) {
errorMessage.value = 'Please enter both username and password.';
return;
}
// Make API call to login endpoint
// ...
// Reset the form fields and error message
username.value = '';
password.value = '';
errorMessage.value = '';
};
return {
username,
password,
errorMessage,
submitForm,
};
},
};
</script>
<style scoped>
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
border: 1px solid #ccc;
padding: 20px;
}
label {
font-weight: bold;
}
input {
padding: 5px;
border: none;
border-bottom: 1px solid #ccc;
width: 100%;
font-size: 16px;
}
button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.error-message {
color: red;
}
</style>
```
在这个示例中,我们使用 `ref` 创建了三个响应式变量:`username`、`password` 和 `errorMessage`。`submitForm` 函数用于提交表单,并且在表单验证不通过时会设置 `errorMessage` 变量。在模板中,我们绑定了 `username` 和 `password` 变量到输入框的值上,并且绑定了 `submitForm` 函数到登录按钮的点击事件上。最后,我们还使用了一些简单的 CSS 样式来美化界面。