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

最新推荐文章于 2024-04-07 17:47:33 发布

意初

最新推荐文章于 2024-04-07 17:47:33 发布

阅读量783

点赞数

文章标签： uni-app java 前端 ecmascript javascript vue.js

本文链接：https://blog.csdn.net/weixin_43928112/article/details/134315684

版权

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

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

//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