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

最新推荐文章于 2025-07-03 11:10:54 发布

晚睡要秃头

最新推荐文章于 2025-07-03 11:10:54 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：微信小程序前端框架 vue html javascript

本文链接：https://blog.youkuaiyun.com/qq_44971635/article/details/129708898

Vue 专栏收录该内容

17 篇文章

订阅专栏

该文章展示了如何在Vue.js应用中通过切换类名或图片路径来实现输入框密码显示与隐藏的效果。通过数据绑定和事件监听，当点击眼睛图标时，可以改变密码输入框的可见状态，同时更新图标的状态以反馈当前密码是否可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、通过切换类名实现

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>

展示图