效果:
思路:
- 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码;
- 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式;
- 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标。
页面布局
js代码
完整代码
到此这篇关于vue实现密码显示隐藏功能的思路详解的文章就介绍到这了,更多相关vue实现密码显示隐藏内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!
黄山市民网:https://www.huangshanshimin.com/