uni-app & vue2 记住密码功能

1. html代码

html 复制代码
<checkbox-group @change="checkboxChange">
	<label>
		<checkbox value="" :checked="ifSavePwd" style="transform: scale(0.6);"/>记住密码
	</label>
</checkbox-group>

2. js代码

默认复选款是不选中 在 data 里定义 SavePwd : false

javascript 复制代码
checkboxChange(e) {
	this.ifSavePwd = !this.ifSavePwd
	this.savePwd()
},

savePwd() {
	uni.setStorageSync('ifSavePwd', this.ifSavePwd)
	if (this.ifSavePwd === true) {
		console.log('保存用户密码')
		if (this.username) {
			uni.setStorageSync('username', this.username)
		}
		if (this.password) {
			uni.setStorageSync('password', this.password)
		}
	} else if (this.ifSavePwd === false) {
		console.log('无需保存用户密码')
		uni.removeStorageSync('username')
		uni.removeStorageSync('password')
	}
},

3. 效果

相关推荐
社恐的下水道蟑螂8 分钟前
从字符串到像素:深度解析 HTML/CSS/JS 的页面渲染全过程
javascript·css·html
程序定小飞9 分钟前
基于springboot的web的音乐网站开发与设计
java·前端·数据库·vue.js·spring boot·后端·spring
Hello_WOAIAI11 分钟前
2.4 python装饰器在 Web 框架和测试中的实战应用
开发语言·前端·python
FinClip18 分钟前
凡泰极客亮相香港金融科技周,AI助力全球企业构建超级应用
前端
阿四37 分钟前
【Nextjs】为什么server action中在try/catch内写redirect操作会跳转失败?
前端·next.js
申阳40 分钟前
Day 6:04. 基于Nuxt开发博客项目-LOGO生成以及ICON图标引入
前端·后端·程序员
中国lanwp1 小时前
npm中@your-company:registry 和 registry 的区别
前端·npm·node.js
Bacon1 小时前
Electron 应用商店:开箱即用工具集成方案
前端·github
行走的陀螺仪1 小时前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
冴羽1 小时前
JavaScript 异步循环踩坑指南
前端·javascript·node.js