用vue写一个登录注册模块
时间: 2024-05-10 07:13:58 浏览: 7
好的,下面是一个简单的登录注册模块的 Vue 代码示例:
```
<template>
<div>
<h2>{{title}}</h2>
<form v-if="isLogin">
<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 @click.prevent="login">登录</button>
<p>还没有账号?<a href="#" @click.prevent="toggleForm">去注册</a></p>
</form>
<form v-else>
<div>
<label for="new-username">用户名:</label>
<input type="text" id="new-username" v-model="newUsername">
</div>
<div>
<label for="new-password">密码:</label>
<input type="password" id="new-password" v-model="newPassword">
</div>
<button @click.prevent="register">注册</button>
<p>已有账号?<a href="#" @click.prevent="toggleForm">去登录</a></p>
</form>
</div>
</template>
<script>
export default {
data() {
return {
isLogin: true,
title: '登录',
username: '',
password: '',
newUsername: '',
newPassword: ''
}
},
methods: {
toggleForm() {
this.isLogin = !this.isLogin
this.title = this.isLogin ? '登录' : '注册'
},
login() {
// 发送登录请求
},
register() {
// 发送注册请求
}
}
}
</script>
```
这个示例包括一个切换登录和注册的按钮和相应的表单。当用户点击“去注册”时,表单会切换到注册模式。相反,当用户点击“去登录”时,表单会切换到登录模式。登录和注册按钮的点击事件会触发相应的方法,你可以在这些方法中发送登录和注册请求。当然,你需要自己实现这些请求的逻辑。在这个示例中,我们只是简单地定义了这些方法,但没有实现它们。