vue 原生input 密码显示与隐藏

最新推荐文章于 2025-03-02 09:00:00 发布

努力搬砖的小码

最新推荐文章于 2025-03-02 09:00:00 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_63199745/article/details/127635128

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

思路：通过点击事件来切换 input的类型（password 和 type）

通过图片的动态渲染来决定显示与隐藏

1、html

  <div  style="width: 396px; font-size: 20px; color: #3d3d3d; float: left; margin-top: 21px; text-align:left">
            密码
          </div>
          <input :type="passwordType" v-model="password" placeholder="请输入密码"  maxlength="8" style=" display:inline; width: 396px; height: 30px; border-radius: 4px; opacity: 1; box-sizing: border-box;  border: 1px solid #d9d9d9; margin-top: 7px;" />
          <img :src="status" alt="" style="vertical-align:middle" @click="changeStatus()"> 
        </div>

2、js

  data () {
    return {
      status: require('../../assets/close.png'),
      passwordType: 'password',
      password: '',
      username: ''
    }
  },

methods:{
      // 密码切换
  changeStatus () {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password';
      this.status = this.status == require('../../assets/close.png') ? 
   require('../../assets/open.png') : require('../../assets/close.png')
    },
}