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

时间：2021-05-26

效果：

思路：

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

    • 页面布局

    <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实现密码显示隐藏内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章