欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实现密码显示隐藏功能的思路详解

程序员文章站 2022-06-15 10:44:32
效果:思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码; 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制...

效果:

vue实现密码显示隐藏功能的思路详解

思路:

  1. 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码;
  2. 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式;
  3. 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标。

页面布局

js代码

完整代码

到此这篇关于vue实现密码显示隐藏功能的思路详解的文章就介绍到这了,更多相关vue实现密码显示隐藏内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!