使用Vue函数组件写一个登录页面
时间: 2023-05-30 12:07:11 浏览: 105
以下是一个简单的使用Vue函数组件写的登录页面示例:
```
<template>
<div class="login">
<h1>登录</h1>
<form @submit.prevent="login">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
username: "",
password: ""
};
},
methods: {
login() {
// 这里可以使用axios等工具发送登录请求
console.log(`用户名:${this.username},密码:${this.password}`);
}
}
};
</script>
<style>
.login {
max-width: 400px;
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login h1 {
margin-bottom: 20px;
}
.login form {
display: flex;
flex-direction: column;
}
.login form div {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.login form label {
flex: 1;
text-align: right;
margin-right: 10px;
}
.login form input {
flex: 3;
padding: 5px;
border-radius: 3px;
border: 1px solid #ccc;
outline: none;
}
.login form button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
```
在这个示例中,我们定义了一个名为`Login`的Vue函数组件,并在模板中渲染了登录表单。表单中包含了两个输入框,用于输入用户名和密码,以及一个“登录”按钮,用于提交表单。在组件的`data`选项中,我们定义了两个响应式数据`username`和`password`,分别用于存储用户输入的用户名和密码。在组件的`methods`选项中,我们定义了一个`login`方法,用于处理表单的提交事件。在该方法中,我们可以使用axios等工具发送登录请求。在这里,我们只是简单地将用户名和密码打印到控制台中。最后,我们使用CSS样式对登录表单进行了简单的美化。