pc中的vue中的input密码框显示与隐藏切换

最新推荐文章于 2023-10-20 10:18:13 发布
最新推荐文章于 2023-10-20 10:18:13 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bajie_year/article/details/103269909
版权

之前项目中没有接触到密码框显示与隐藏，这次这个项目中添加了密码框的显示与隐藏，所以记录一下思路
点击显示按钮，密码框显示密码，隐藏将密码显示为小黑点形式，主要是改变type的属性，在小程序中，不能改变type的属性，如果改变type属性，在模拟机上可以正常显示，在真机上不能正常显示
在pc上只要改变type的类型就行，废话不多说，上代码
在这里插入图片描述
或者试试这种
直接绑定password的状态，true或者false，真机测试可以，
在这里插入图片描述

青枫岸，白石湫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3下的密码输入框（antdesignvue）
sinat_31773153的博客
08-29 812
vue3下的密码输入框（antdesignvue）
Vue+iview 密码框输入显示隐藏控制
SophiaJZ的博客
11-06 2465
Vue+iview 密码框输入控制显示隐藏
vue 登录框密码显示隐藏切换！
qq_42957741的博客
10-22 2015
1.需求分析，通过点击右边眼睛图标，让密码显示隐藏。 2. 逻辑分析，让俩个input框通过指令model来获取相同得数据，让俩个input type属性不同，这样通过点击右边眼睛图标来实现input的切换，逻辑完成。 3. 个人见解，不足之处多多指教。 <div class="ag_name"> <van-cell-group> ...
Element UI 密码输入框--可切换显示隐藏，自定义图标
最新发布
朝阳39的博客
10-20 1175
【代码】Element UI 密码输入框--可切换显示隐藏，自定义图标。
【element-ui】使用 show-password 切换显示和隐藏后，鼠标焦点跑到最前面去了，怎么解决？（实测有效）
龙丨行的博客
06-03 1564
直接升级版本到 2.15.2 就可以了，亲测有效！！！！ 你们可以直接找个在线运行 页面 直接测试。 测试方法： https://element.eleme.cn/#/zh-CN/component/input 下的密码框 右下方有个在线运行，点击运行。 可以注意到2.15.2 版本的就可以，而 2.13.2 或者2.14.1 的就不行。（我的就是 2.13.2） 其他： 有个奇怪的网站，我留言解决方法，它还要审核！！！！！审核就算了，还要一些时间，我这暴脾气，受不了，直接发了~ ...
密码输入框切换显示与隐藏
meimeijiangjiang的博客
03-10 5308
在设置密码时,会有密码输入框的显隐切换的需求,方便用户操作 第一种方式: 用的是element的输入框,比较简单,添加show-password即可 <el-input placeholder="请输入密码" v-model="input" show-password></el-input> 使用show-password属性即可得到一个可切换显示隐藏的密码框 第二...
vue基于 input 实现密码的显示与隐藏功能
weixin_62897746的博客
12-03 4457
前言： 大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让input的type属性变化即可。 代码讲解： 使用Color的true或false判断显示图标的样式，input框则使用Type的样式进行显示，@click="Show"点击修改密码的显示或者隐藏
在Vue中实现密码框可见与隐藏的切换
高冷的恒哥
09-30 5137
话不多说，最终的效果图如下： 实现原理如下： （1）定义一个flag，初始值设置为false，密码框其实是在 type='text' type='password' 之间在切换而已； （2）在密码框后面添加一个图标，这个图标的范围很广，可是是ElementUI的icon，可以是Bootstrap的icon，也可以是下载的图片，格式包括png、svg等等，当然了，图片和icon的...
vue 如何实现切换密码的显示与隐藏
浮生离梦的博客
04-12 1639
一、vue 实现切换密码的显示与隐藏 在 data 中定义 showPwd，默认为 false，用来控制密码的显示与隐藏。定义 pwd，默认为空，是密码的值，代码如下所示： data() { return { showPwd: false, pwd: '' } } 在密码的显示与隐藏中，有两种输入框，一个是类型为text的文本框用来展示密码，另一个是类型为passw...
基于vue 实现表单中password输入的显示与隐藏功能
10-16
主要介绍了vue 实现表单中password输入的显示与隐藏功能 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue.js表单输入框密码强度验证代码
06-12
vue.js表单输入框密码强度验证代码是一款适用于电脑跟手机注册表单输入密码强度验证特效。
vue 验证两次输入的密码是否一致的方法示例
10-14
主要介绍了vue 验证两次输入的密码是否一致的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现密码显示隐藏切换功能
08-27
主要介绍了vue实现密码显示隐藏切换功能,需要的朋友可以参考下
vue+elementUi 实现密码显示/隐藏+小图标变化功能
10-15
主要介绍了vue+elementUi 实现密码显示/隐藏+小图标变化功能,需本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue基于iview实现登录密码的显示与隐藏功能
10-15
主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
关于uniapp中打包白屏
8月13日
10-23 5477
在项目完成提交审核中，打回两次都是因为白屏，我在真机上，还有模拟机上都是正常的，也很纳闷，后来在体验版上自己测试时，发现也是白屏，所以，知道打回的具体原因 报错图 这是在苹果版上的错误，安卓上面就是报 后面百度，谷歌后，最终察觉原因应该在字体图标上 然后我一个个删除，发现是因为iconfont.js文件的存在， 把iconfont.js文件删除，在提交，就审核通过了 ...
关于微信小程序中的密码切换显示与隐藏
8月13日
11-21 2369
在之前想当然的觉得，切换显示与隐藏不就是切换type的类型，在模拟机上完美运行，能够实现，但是在真机中，不能实现，有时可以，有时不可以，在网上找到的解决办法就是写两个input的，然后判断语句切换显示和隐藏，这样也能实现，在真机也能实现。 后来看到一个新办法说是因为方向弄错 了，删除type的属性，动态绑定password的值，点击显示时，让password的属性显示true，再次点击显示按钮时，...
关于flex中width宽度失效
8月13日
07-03 1953
关于使用flex中width宽度失效 可以使用display：flex 在子元素中使用 flex-shrink: 0; 可以保持，实测有用
vue循环多个单选框
07-28
回答: 在Vue循环生成的多个单选框中，可以通过添加一个label元素来调整单选框的样式。首先，需要将input元素的display属性设置为none，以隐藏它。然后，通过调整label元素的样式来实现自定义的单选框样式。可以设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值