vue网页登录界面模板
时间: 2023-11-09 13:08:13 浏览: 51
我们可以使用以下模板来创建一个简单的Vue网页登录界面:
```html
<template>
<div class="login-container">
<h1>Login</h1>
<form @submit.prevent="login">
<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>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 在这里处理登录逻辑
console.log('Username:', this.username);
console.log('Password:', this.password);
}
}
}
</script>
<style scoped>
.login-container {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input {
padding: 5px;
margin-top: 5px;
}
button {
margin-top: 10px;
padding: 5px;
background-color: #007bff;
color: #fff;
border: none;
}
</style>
```
这是一个简单的登录界面模板,包含一个用户名和密码的输入框,以及一个登录按钮。当点击登录按钮时,会触发`login`方法,你可以在`login`方法中处理登录逻辑。