微信小程序开发，密码显示隐藏

效果图


wxml代码截图讲解，需要先安装好vant ui，大家正常开发小程序都用到这ui库

js代码截图讲解

截图中的代码
wxml

  <!-- 密码框 -->
          <van-cell-group border="{{ false }}">
            <van-field label-class="left_text" input-class="inputFrame" title-width="80rpx" label="密码" password="{{ passwordType }}" value="{{ userBox.inputPassword }}" placeholder="请输入密码" border="{{ false }}" bind:change="inputPassword" />
          </van-cell-group>
          <!-- 密码显示隐藏图片 -->
          <image src="{{ iconSrc }}" bindtap="changeIcon" class="rightIcon {{ passwordType==true?'':'showHeight' }}" />

js

 changeIcon(e) { //密码的显示与隐藏
    if (this.data.passwordType == false) { //当密码可见
      this.setData({
        iconSrc: app.passwordImg.concealUrl,
        passwordType: true
      });
    } else if (this.data.passwordType == true) { //当密码不可见
      this.setData({
        iconSrc: app.passwordImg.showUrl,
        passwordType: false
      });
    };
  },

提供一点思路，这些变量替换了就好了。