如何用vue写一个登录页记住密码的功能
时间: 2024-05-11 07:16:50 浏览: 11
您可以使用vue插件vue-cookie来实现这一功能。首先,需要在项目中安装vue-cookie插件。在登录页中,添加一个记住密码的复选框,当用户勾选了该复选框时,使用vue-cookie将登录信息保存在cookie中。当用户下次打开登录页时,可以在cookie中找到已保存的登录信息并自动填充到输入框中。以下是示例代码:
```
<template>
<div>
<div>
<label>
用户名:
<input v-model="username">
</label>
</div>
<div>
<label>
密码:
<input v-model="password">
</label>
</div>
<div>
<label>
记住密码:
<input type="checkbox" v-model="remember">
</label>
</div>
<div>
<button @click="login">登录</button>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import VueCookie from 'vue-cookie'
Vue.use(VueCookie)
export default {
data() {
return {
username: '',
password: '',
remember: false
}
},
mounted() {
if (this.$cookie.get('remember')) {
this.username = this.$cookie.get('username')
this.password = this.$cookie.get('password')
this.remember = true
}
},
methods: {
login() {
// 处理登录逻辑
if (this.remember) {
this.$cookie.set('username', this.username)
this.$cookie.set('password', this.password)
this.$cookie.set('remember', true)
} else {
this.$cookie.delete('username')
this.$cookie.delete('password')
this.$cookie.delete('remember')
}
}
}
}
</script>
```
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![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)