vue实现密码显示隐藏、很简单易懂

系统管理员 2021-07-24 13:58 580阅读 0赞

## 效果： ##

![20210319180857547.gif][]

## 思路： ##

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;
            }
        }
    })

## 完整代码 ##

<!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'>
            
            密码：<input :type='pwdFlag?"password":"text"' size='10'>
            
                  <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>

## 这代码没有一点难度一看就明白！ ##

[20210319180857547.gif]: /images/20210724/205ccd1a0e8e447485358396093e7109.png