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

效果：

思路：

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

页面布局

div id='app'>
        !--三元表达式 pwDFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 -->
        密码：input :type='pwdFlag?"password":"text"' size='10'>
        !--pwdFlag为真说明密码是隐藏的，显示眼睛打开图标，反之显示眼睛关闭图标-->
           img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;
    ">
          /div>
    

JS代码

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

完整代码

!DOCTYPE htML>
    html lang="en">
    head>
      meta charset="UTF-8">
      meta name="viewport" content="width=device-width, inITial-scale=1.0">
      title>
    Document/title>
    /head>
    style>
     /style>
    body>
      div id='app'>
        !--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 -->
        密码：input :type='pwdFlag?"password":"text"' size='10'>
        !--pwdFlag为真说明密码是隐藏的，显示眼睛打开图标，反之显示眼睛关闭图标-->
           img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;
    ">
          /div>
    /body>
    script src="vue.js">
    /script>
    script>
new Vue({
  el:'#app',  data:{
    pwdFlag:true,//密码标示 true表示当前是密码形式    textIcon:'./images/show.jpg',//展示图标    pwdIcon:'./images/hide.jpg',//隐藏图标  }
,  methods:{
    //改变密码表示    changePwd:function(){
          //密码标示取反即可      this.pwdFlag=!this.pwdFlag;
    }
  }
}
    ) /script>
    /html>
    

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

• Vue基于iview实现登录密码的显示与隐藏功能
• vue+elementUi 实现密码显示/隐藏+小图标变化功能
• vue实现密码显示与隐藏按钮的自定义组件功能
• vue实现密码显示隐藏切换功能
• vue基于input实现密码的显示与隐藏功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！