使用vue制作登录注册界面
时间: 2023-11-27 21:04:04 浏览: 30
好的,下面是一个简单的登录注册界面的示例代码:
```
<template>
<div class="container">
<div class="login-form">
<h2>Login</h2>
<form @submit.prevent="login">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" v-model="loginForm.email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" v-model="loginForm.password" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="register-form">
<h2>Register</h2>
<form @submit.prevent="register">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" v-model="registerForm.name" required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" v-model="registerForm.email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" v-model="registerForm.password" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
email: '',
password: ''
},
registerForm: {
name: '',
email: '',
password: ''
}
};
},
methods: {
login() {
// 发送登录请求
},
register() {
// 发送注册请求
}
}
};
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form,
.register-form {
width: 400px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-form h2,
.register-form h2 {
text-align: center;
margin-bottom: 20px;
}
</style>
```
这个示例代码包含了一个登录表单和一个注册表单,使用了Bootstrap样式。你可以根据自己的需要进行修改和扩展。需要注意的是,这个示例代码只包含了前端部分,实现登录注册功能需要与后端进行交互。