wxml

注意：在html中的input是通过切换type的属性值来实现隐藏显示的

在微信小程序的input里面type没有password属性 是通过password属性的true或者false来设置是否为密码框

<view class="input-item"><text class="tit">密码</text><view style="display: flex;justify-content: space-between;"><input type="text" password="{{show}}" placeholder="请输入密码" model:value="{{password}}" /><van-icon style="margin-left: 30rpx;" bindtap="showpassword" name="{{show?'eye-o':'closed-eye'}}" color="#000000" /></view></view>

 wxss

.input-item{display:flex;flex-direction: column;align-items:flex-start;justify-content: center;padding: 0 30rpx;background:#dddddde1;height: 120rpx;border-radius: 4px;margin-bottom: 50rpx;}.input-item:last-child{margin-bottom: 0;
}
.input-item .tit{height: 50rpx;line-height: 56rpx;font-size: 30rpx;color: #606266;
}
.input-item input{height: 60rpx;font-size: 30rpx;color: #303133;width: 100%;
}

js

data: {// 显示隐藏密码show: true,// 密码password: "",},// 切换显示密码showpassword() {this.setData({show: !this.data.show,})}