在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
效果:思路:
页面布局 <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实现密码显示隐藏内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论