这篇文章主要介绍了vue实现密码显示隐藏功能的思路详解,本文给大家介绍的非常详细，对大家的学本文来源gao@daima#com搞(%代@#码@网&习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
思路：
- 利用input的type属性，当type值是text的时候展示密码，当type值是password的时候隐藏密码；
- 于是很容易想到用v-bind来绑定type，同时用一个布尔值来控制，写成三元表达式的形式；
- 加入一个图片元素，点击图标元素切换这个布尔值，就可以达到切换显示隐藏，切换布尔值的同时也切换图标。
页面布局
<div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 --> 密码：<!--pwdFlag为真说明密码是隐藏的，显示眼睛打开图标，反之显示眼睛关闭图标--></div>
JS代码
new Vue({ el:'#app', data:{ pwdFlag:true,//密码标示 true表示当前是密码形式 textIcon:'./images/show.jpg-600',//展示图标 pwdIcon:'./images/hide.jpg-600',//隐藏图标 }, methods:{ //改变密码表示 changePwd:function(){ //密码标示取反即可 this.pwdFlag=!this.pwdFlag; } } })
完整代码
<title>Document</title> <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 --> 密码：<!--pwdFlag为真说明密码是隐藏的，显示眼睛打开图标，反之显示眼睛关闭图标--></div>
以上就是vue实现密码显示隐藏功能的思路详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现密码显示隐藏功能的思路详解
转载请注明原文链接：vue实现密码显示隐藏功能的思路详解
