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

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

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

Vue框架
web18296061989的博客
03-02 4868
目录 1. Vue 的基本认识 1.1. 官网 1.2. 介绍描述 1.3. Vue 的特点 1.4. 与其它前端 JS 框架的关联 1.5. Vue 扩展插件 2 Vue 的基本使用 2.1开发者工具调试Vue.js devtools_3.1.2_0 2.2 框架使用方式 2.3 框架使用 2.4 Vue数据单向传递 2.4.1 MVVM模型 2.4.2 Vue中的MVVM的划分 2.4.3 Vue中数据的单向传递 2.5 Vue数据双向绑定 3 常见指令 3.1 什么是指令
Vue 2.0 + element-ui 监听鼠标中键滚动的动作，完成切换跑马灯的同时切换不同身份用户登录的状态
tea_dragon的博客
10-15 367
此处是在vue实例挂载到dom上去后设置界面监听鼠标滚轮的动作，但是在服务器启动的时候，需要时间缓冲不然直接调用会提示找不到setActiveItem。此处也可以不设置时间，可以在挂载到dom上之前进行时间设置。避免每次滚动滚轮的时候出现延迟。
vue 实现表单中password输入的显示与隐藏.
weixin_34195142的博客
11-10 1962
实现效果： 点击 “眼睛” 的时候显示与隐藏 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="stylesheet"> &...
在Vue中实现密码框可见与隐藏的切换
高冷的恒哥
09-30 5396
话不多说，最终的效果图如下： 实现原理如下： （1）定义一个flag，初始值设置为false，密码框其实是在 type='text' type='password' 之间在切换而已； （2）在密码框后面添加一个图标，这个图标的范围很广，可是是ElementUI的icon，可以是Bootstrap的icon，也可以是下载的图片，格式包括png、svg等等，当然了，图片和icon的...
避坑--a-input-password触发浏览器自动填充
最新发布
qq_17328759的博客
04-03 1243
避免自动填充浏览器存储的账号密码。
vue3+ant-design-vue 实现 input 模拟密码框效果
gaotlantis的博客
06-26 744
网上找到了很多简单的方案，比如加 readonly 属性再去掉等，都没有效果。只剩下使用 input 模拟密码框交互的方案。备注：代码逻辑上，依赖于光标位置的赋值取值时机先后；selectionchange 会比 change 事件后触发。测试：怎么忘记密码和确认密码还有记住密码的提示框？测试：怎么忘记密码和确认密码被自动填充记住的密码了？我： 反手给密码框加上了 autocomplete="off"如果有不足或有问题的地方，欢迎留言评论。的思路做了 vue3 的版本。
vue 如何实现切换密码的显示与隐藏
浮生离梦的博客
04-12 1775
一、vue 实现切换密码的显示与隐藏 在 data 中定义 showPwd，默认为 false，用来控制密码的显示与隐藏。定义 pwd，默认为空，是密码的值，代码如下所示： data() { return { showPwd: false, pwd: '' } } 在密码的显示与隐藏中，有两种输入框，一个是类型为text的文本框用来展示密码，另一个是类型为passw...
elementui 隐藏输入框_vue+elementUi 实现密码显示/隐藏+小图标变化功能
weixin_42512903的博客
12-23 2080
vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码，其中一行为了美观)...，先给大家展示下效果图，感觉不错可以参考实现代码。【效果图】【html】// 前后代码【略】【js】showPwd () {this.pwdType === 'password' ? this.pwdType = '' : this.pwdType = 'password';let e = doc...
Vue基于iview实现登录密码的显示与隐藏功能
10-15
本文将详细讲解如何使用Vue.js结合iView组件库来实现一个能够控制密码显示与隐藏的功能。 ### iview简介 iView是一套基于Vue.js的开源UI组件库，专为PC界面的中后台产品设计。它提供了丰富的组件和实用的功能，...
vue实现6位支付密码
08-10
本项目是关于使用Vue.js来实现一个六位支付密码的功能，适用于PC站点。在本文中，我们将深入探讨如何利用Vue.js及其相关工具来创建这样一个组件。 首先，我们需要安装Vue CLI（命令行接口），它是Vue.js官方提供的...
Vue input输入框中的值如何变成黑点
LeveBe的博客
10-18 2302
<login-input type="password" placeholder="请输入密码" ref="passwordInput"></login-input> 上面是自定义的组件，type 和 placeholder 分别作为参数。 type="password" type 设置为 password 就可以显示输入值变成黑点了。 上效果图： ...
html输入密码自动隐藏,el-input 标签中密码的显示和隐藏
weixin_36080584的博客
06-02 1108
本文将为您描述el-input 标签中密码的显示和隐藏,具体完成步骤:效果展示：密码隐藏：密码显示：代码展示：一：标签代码二：中代码var app = new Vue({el:"#app",data:{users:[],total:100,pageSize:5,pageNum:1,//用于显示或隐藏添加修改表单add:false,//用于改变Input类型passw:"password",//用于...
关于vue登录密码的显示隐藏
这里是痞子Monkey的博客
05-28 1万+
在网上百度了很多答案，不知道为什么我用了就是没效果，还出现bug，然后就自己结合网上的终于搞出来了，撒花✿✿ヽ(°▽°)ノ✿密码的输入框我先用了一个文本框，input="text",给了他v-if="pwdType",v-model="eyetxt",然后在文本框后面又给了一个密码框，input="password",给了他v-model="eyetxt",v-else,这就是密码框了，给文本框是...
HTML密码隐藏标签,el-input 标签中密码的显示和隐藏
weixin_33269743的博客
06-04 716
效果展示：密码隐藏：密码显示：代码展示：一：标签代码二：中代码var app = new vue({el:"#app",data:{users:[],total:100,pagesize:5,pagenum:1,//用于显示或隐藏添加修改表单add:false,//用于改变input类型passw:"password",//用于更换input中的图标icon:"el-input__icon el-...
Vue中实现输入框Input输入限制
热门推荐
xqhys的博客
07-04 1万+
输入框Input输入限制
【element-ui】使用 show-password 切换显示和隐藏后，鼠标焦点跑到最前面去了，怎么解决？（实测有效）
龙丨行的博客
06-03 1942
直接升级版本到 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 5711
在设置密码时,会有密码输入框的显隐切换的需求,方便用户操作 第一种方式: 用的是element的输入框,比较简单,添加show-password即可 <el-input placeholder="请输入密码" v-model="input" show-password></el-input> 使用show-password属性即可得到一个可切换显示隐藏的密码框 第二...
问题：浏览器自动填充input密码框
HUMM
02-15 1892
问题 浏览器会默认将已保存的账号密码 自动填充 到input为type="password"的输入框内（autocomplete="off"不起作用），type ="text" 时不会出现自动填充问题。 解决 方法1： 向账号和密码项前面多加2个input标签，并将第2个input标签的 type 设置为 password，然后通过样式将这2个input输入框隐藏（样式：{width: 0; height: 0; }），自动填充的值转移到这两个隐藏的input框了。 方法2： 在type="passwor
antd vue input 密码以密文展示
weixin_45346457的博客
02-03 1589
<a-form-item label="设置密码"> <a-input autocomplete="off" type="password" v-decorator="['password', { rules: [{ required: true, message: '建议使用数字、字母、特殊字符组合' }] }]" /> </a-form-item> type..
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值