vue实现密码显示隐藏功能的思路详解

效果：

思路：

1. 利用input的type属性，当type值是text的时候展示密码，当type值是password的时候隐藏密码；
2. 于是很容易想到用v-bind来绑定type，同时用一个布尔值来控制，写成三元表达式的形式；
3. 加入一个图片元素，点击图标元素切换这个布尔值，就可以达到切换显示隐藏，切换布尔值的同时也切换图标。

页面布局

    
    密码：
    
           
  

JS代码

new Vue({
  el:'#app',
  data:{
    pwdFlag:true,//密码标示 true表示当前是密码形式
    textIcon:'./images/show.jpg',//展示图标
    pwdIcon:'./images/hide.jpg',//隐藏图标
  },
  methods:{
    //改变密码表示
    changePwd:function(){
      //密码标示取反即可
      this.pwdFlag=!this.pwdFlag;
    }
  }
})

完整代码

  
  
  



  

    
    密码：
    
           
  

到此这篇关于vue实现密码显示隐藏功能的思路详解的文章就介绍到这了,更多相关vue实现密码显示隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！