快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

vue+elementUi实现密码显示/隐藏+小图标变化功能

vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码。

成都网站建设公司更懂你!成都创新互联只做搜索引擎喜欢的网站!成都网站制作前台采用搜索引擎认可的DIV+CSS架构,全站HTML静态,HTML5建站+CSS3网站,提供:网站建设,微信开发,微信平台小程序开发商城开发成都app软件开发,空间域名,服务器租售,网站代托管运营,微信公众号代托管运营。

【效果图】

vue+elementUi 实现密码显示/隐藏+小图标变化功能
vue+elementUi 实现密码显示/隐藏+小图标变化功能
vue+elementUi 实现密码显示/隐藏+小图标变化功能

【html】

// 前后代码【略】

 
  
 

【js】

showPwd () {
 this.pwdType === 'password' ? this.pwdType = '' : this.pwdType = 'password';
 let e = document.getElementsByClassName('el-icon-view')[0];
 this.pwdType == '' ? e.setAttribute('style', 'color: #409EFF') : e.setAttribute('style', 'color: #c0c4cc');
},

ps:下面看下vue+element-ui实现显示隐藏密码



 总结

以上所述是小编给大家介绍的vue+elementUi 实现密码显示/隐藏+小图标变化功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


本文名称:vue+elementUi实现密码显示/隐藏+小图标变化功能
文章路径:http://6mz.cn/article/ijspeg.html

其他资讯