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

相关推荐
神秘的猪头3 分钟前
🌐 CSS 选择器详解:从基础到实战
前端·javascript
Zyx20073 分钟前
JavaScript 执行机制深度解析(上):编译、提升与执行上下文
javascript
远山枫谷4 分钟前
CSS选择器优先级计算你真的会吗?
前端·css
Forever_xl4 分钟前
埋点监控平台全景调研
前端
神秘的猪头4 分钟前
JavaScript 中的 `map()` 方法详解与面向对象编程初探
前端·javascript
有点笨的蛋5 分钟前
这些 CSS 小细节没处理好,你的页面就会“闪、抖、卡”——渲染机制深度拆解
前端·css
2501_915918416 分钟前
Flutter 加固方案对比与实战,多工具组合的跨平台安全体系(Flutter App 加固/IPA 成品混淆/Ipa Guard CLI/自动化安全流程)
安全·flutter·ios·小程序·uni-app·自动化·iphone
烟袅7 分钟前
JavaScript 中 map 与 parseInt 的经典陷阱:别再被“巧合”骗了!
前端·javascript
烟袅9 分钟前
JavaScript 中 string 与 new String() 的本质区别:你真的懂“字符串”吗?
前端·javascript
_大学牲10 分钟前
从 0 到上架:用 Flutter 一天做一款功德木鱼
前端·flutter·apple