【vue2+uniapp】密码框输入密码显示和隐藏小功能（两种方法实现）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【vue2+uniapp】密码框输入密码显示和隐藏小功能（两种方法实现）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、通过切换类名实现

1.html布局

<view class="content">
      <view class="label">请输入退款密码</view>
      <input v-model="params.pwd" placeholder="退款密码" :password="openPassword"/>
      <view :class="[!openPassword ? 'psd-eye-active' : 'psd-eye']" @click="changePassword"></view>
</view>

2.样式部分（自己看着写）

.content{
    position:relative;
.psd-eye-active{
        width: 45rpx;
        height: 45rpx;
        background:url(../../../static/login/icon_turn.png) no-repeat center center;
        position: absolute;
        right: 50rpx;
        top: 50%;
        z-index:10;
    }
.psd-eye{
        width: 45rpx;
        height: 45rpx;
        background:url(../../../static/login/eye.png) no-repeat center center;
        position: absolute;
        right: 50rpx;
        top: 50%;
        z-index:10;
    }
}

3.功能部分

<script>
    data() {
            return {
                openPassword: true
            }
        },
    methods: {
        changePassword() {
             this.openPassword = !this.openPassword;
             }
        }
</script>

二、通过图片路径切换

1.html布局

<view class="content">
      <view class="label">请输入退款密码</view>
      <input v-model="params.pwd" placeholder="退款密码" :password="openPassword"/>
      <image class="psd-eye" :src="psdUrl"  mode="aspectFill" @click="changePassword"></image>
</view>

2.样式部分（自己看着写）

.content{
    position:relative;
.psd-eye{
    width: 45rpx;
    height: 45rpx;
    position: absolute;
    right: 50rpx;
    top: 55%;
    z-index:10;
   }
}

3.功能部分

<script>
    data() {
            return {
                openPassword: true,
                psdUrl:'../../../static/login/eye.png'
            }
        },
    methods: {
        changePassword() {
             this.openPassword = !this.openPassword;
             if(this.openPassword){
                    this.psdUrl = '../../../static/login/eye.png'
                }else{
                    this.psdUrl = '../../../static/login/icon_turn.png'
                }
             }
        }
</script>

展示图文章来源地址https://www.toymoban.com/news/detail-524672.html