vue3登录界面源代码
时间: 2024-08-12 20:04:03 浏览: 63
Vue3登录界面的源代码通常包含HTML、CSS和JavaScript三部分。以下是一个简单的例子,展示了一个基础的登录表单结构:
```html
<!-- login.vue -->
<template>
<div class="login-form">
<h2>Login</h2>
<form @submit.prevent="handleSubmit">
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" required>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
<button type="submit">Login</button>
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
errorMessage: ''
};
},
methods: {
handleSubmit(event) {
event.preventDefault();
// 这里模拟API请求,实际项目会发送到服务器验证
if (this.username === 'admin' && this.password === 'password') {
// 登录成功处理
this.errorMessage = '';
} else {
this.errorMessage = 'Invalid credentials';
}
}
}
};
</script>
<style scoped>
.login-form {
width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
}
.error {
color: red;
}
</style>
```
这个代码片段定义了一个Vue组件,当用户提交登录表单时,它会检查用户名和密码是否匹配预设值。如果验证失败,会在页面上显示错误消息。
请注意,这只是一个基本示例,并未涉及实际的路由保护、状态管理(如Vuex)、或身份验证库的集成。实际应用可能会更复杂,包括异步操作、路由跳转以及可能的权限控制等。