uniapp踩坑之项目:隐藏显示密码功能

1.input组件的password设置为动态前面加:冒号;

2.动态切换眼睛图标使用:style

javascript 复制代码
//html
<view>
密码:<input placeholder="请输入密码" :password="openPassword" type="text" placeholder-style="color:#e2e2e2;" maxlength="20" @input="getPassword" />
<img :src="openPassword?'./../../static/images/passwordshow.png':'./../../static/images/passwordfalse.png'" @tap="isShowPassword">
</view>

//data
openPassword: true, // 眼睛/密码隐藏显示
     
//js
// 密码隐藏显示
isShowPassword () {
 this.openPassword = !this.openPassword;
},

上一篇文章,

uniapp踩坑之项目:uniapp数字键盘组件---APP端-CSDN博客文章浏览阅读196次。uniapp数字键盘组件---APP端/在components文件夹创建digitKeyboard文件夹,再创建digitKeyboard.vue。// 数字键盘组件 在项目里main.js中配置如下代码。//main.js全局引入。https://blog.csdn.net/weixin_43928112/article/details/134204799?spm=1001.2014.3001.5501

相关推荐
KaMeidebaby3 分钟前
卡梅德生物技术快报|基因测序技术在 46,XY 性发育障碍变异筛查中的流程与数据分析
服务器·前端·数据库·人工智能·算法·数据挖掘·数据分析
摇滚侠4 分钟前
浏览器调试工具 检查元素 谷歌模拟器 控制台 断点调试
java·html
ZengLiangYi5 分钟前
SourceAdapter 插件架构详解
javascript·算法·架构
m0_7381207215 分钟前
渗透测试基础——黑盒测试下的Web漏洞挖掘与利用解析(二)
服务器·前端·python·网络协议·安全·网络安全
weixin_4296302616 分钟前
3.50 WebARNav:边缘辅助视觉定位的移动Web AR室内导航
前端·ar
心之伊始18 分钟前
Spring Boot 接入 MCP 实战:用 Spring AI 调用本地工具的最小闭环
java·spring boot·agent·spring ai·mcp
ZengLiangYi22 分钟前
如何解析 5 种完全不同格式的 AI 对话
javascript·人工智能·算法
Refrain_zc24 分钟前
无触摸屏场景下的蓝牙交互:Android 纯按键蓝牙扫描配对与 A2DP/Headset 连接
java·蓝牙
yivifu25 分钟前
CSS 自动级联编号有序列表完全指南
前端·css·c#·html·有序列表·级联编号