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 分钟前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
巴博尔4 分钟前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
技术钱5 分钟前
uniapp使用音频录音功能
chrome·uni-app·音视频
焚 城8 分钟前
UniApp 实现双语功能
javascript·vue.js·uni-app
ShareBeHappy_Qin14 分钟前
Spring 中使用的设计模式
java·spring·设计模式
tuine32 分钟前
SpringBoot使用LocalDate接收参数解析问题
java·spring boot·后端
Asthenia041240 分钟前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj501 小时前
前端基础之《React(1)—webpack简介》
前端·react
会写代码的饭桶1 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中1 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web