用vue生成一个登录页的前端代码
时间: 2024-02-11 10:04:14 浏览: 34
下面是一个简单的使用Vue.js生成登录页面的示例代码:
```html
<template>
<div>
<h1>Login</h1>
<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" v-on:click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
// perform login logic here
console.log(`Username: ${this.username}, Password: ${this.password}`);
},
},
};
</script>
<style scoped>
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-right: 10px;
}
input {
margin-bottom: 10px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 5px 20px;
border-radius: 5px;
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
</style>
```
这段代码包含一个登录表单,其中有一个用户名和密码输入框,以及一个登录按钮。当用户单击“登录”按钮时,将触发`login`方法,你可以在这里编写登录逻辑。在这个示例中,我们只是简单地将用户名和密码打印到控制台上。