用vue2写一个登陆注册组件
时间: 2023-06-10 12:03:10 浏览: 48
好的,您需要一个基础的vue2项目,然后再在里面写登录注册组件。建议您先学习vue2的基础知识,并熟悉组件的使用。下面是一个简单的登录注册组件的代码示例:
```vue
<template>
<div>
<form v-show="loginShow" @submit.prevent="login">
<input type="text" v-model="username" placeholder="username" required>
<input type="password" v-model="password" placeholder="password" required>
<button type="submit">Login</button>
</form>
<form v-show="!loginShow" @submit.prevent="register">
<input type="text" v-model="username" placeholder="username" required>
<input type="password" v-model="password" placeholder="password" required>
<input type="password" v-model="confirmPassword" placeholder="confirm password" required>
<button type="submit">Register</button>
</form>
<div v-show="loginShow" class="switch-tab">Not a member yet? <a href="#" @click.prevent="toggleShow">Register here</a></div>
<div v-show="!loginShow" class="switch-tab">Already a member? <a href="#" @click.prevent="toggleShow">Login here</a></div>
</div>
</template>
<script>
export default {
data() {
return {
loginShow: true,
username: '',
password: '',
confirmPassword: ''
}
},
methods: {
toggleShow() {
this.loginShow = !this.loginShow
this.username = ''
this.password = ''
this.confirmPassword = ''
},
login() {
// 发送登录请求
console.log('login', this.username, this.password)
// 处理登录结果
},
register() {
if (this.password !== this.confirmPassword) {
alert('Passwords must match')
return
}
// 发送注册请求
console.log('register', this.username, this.password)
// 处理注册结果
}
}
}
</script>
```
以上代码实现了一个简单的切换登录和注册的功能,同时支持表单验证,可以通过该实现代码改进,以更好地适应您的项目需求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)