这篇文章给大家分享的是有关Vue如何实现密码显示隐藏功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果：思路：利用input的type属性，当type值是text的时候展示密码，当type值是passWord
这篇文章给大家分享的是有关Vue如何实现密码显示隐藏功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
利用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" > </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" > </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如何实现密码显示隐藏功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: vue如何实现密码显示隐藏功能
本文链接: https://www.lsjlt.com/news/268755.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-04-27
2024-04-27
2024-04-27
2024-04-27
2024-04-27
2024-04-27
2024-04-27
2024-04-27
2024-04-27
2024-04-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0