vue基于input如何实现密码的显示与隐藏功能,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可。但是隐藏的密码一般是
"•"
展示,那我们想要用"*"
或者其他的符号显示该怎么办呢,今天就教大家用其他的符号代替"•"
在密码隐藏时展示。
1.首先我们要先在data中定义一个变量用来控制小图标的显示与隐藏;
2.在页面中循环遍历data中的privates(密钥内容),拿到字符串的长度length;
3.拿到密钥的长度后,先把它分割成字符串数组,用于后面插入;
4.然后通过splice方法插入到字符串数组中,splice有三个参数,第一个参数是必要的,是插入元素的位置,第二个参数的意思是要插入的元素数量,第三个参数的意思是要插入的元素是什么;
5.最后我们将字符串数组通过join方法转换成字符串即可。
话不多说,直接上实例代码
<template> <div class="private"> <!--// 显示内容: ==0时显示*,==1时显示密钥内容 --> <span v-if="codeType == 1">{{privates}}</span> <span class="special" v-if="codeType == 0">{{star}}</span> <!--// 小图标: ==0时展示隐藏图标,==1时展示显示图标--> <span v-if="codeType == 1"><img @click="reveal" src="https://s4.ax1x.com/2022/01/07/79E7dg.png"></span> <span v-if="codeType == 0"><img @click="conceal" src="https://s4.ax1x.com/2022/01/07/79EOWn.png"></span> </div> </template> <script> export default { data() { return { privates: "123456789123456789123456789", //密钥内容 codeType: 0, //控制密钥显示隐藏 等于1时显示,等于0时隐藏 star: "", //要插入的星星* } }, mounted() { // 循环遍历拿到密钥的长度 for (var i = 0; i < this.privates.length; i++) { let star = this.star.split('') //分割成字符串数组 star.splice(this.privates.length, this.privates.length, '*') //添加到数组 this.star = star.join('') //将数组转换为字符串 } }, methods: { //显示事件 reveal() { this.codeType = 0 }, //隐藏事件 conceal() { this.codeType = 1 }, } } </script> <style scoped> .private { display: flex; align-items: center; } .private img { width: 20px; height: 20px; vertical-align: middle; cursor: pointer; margin-left: 9px; } .special { position: relative; top: 4px; } </style>
至此这个小功能就实现啦!
一、vue 实现切换密码的显示与隐藏
1.在 data
中定义 showPwd
,默认为 false
,用来控制密码的显示与隐藏。定义 pwd
,默认为空,是密码的值,代码如下所示:
data() { return { showPwd: false, pwd: '' } }
2.在密码的显示与隐藏中,有两种输入框,一个是类型为text
的文本框用来展示密码,另一个是类型为password
的密码框用来隐藏密码。由于showPwd
的默认值为false
,所示设置text
的框为v-if
,默认显示密码,而设置password
的框为 v-else
,默认不显示密码,同时也进行v-model
的双向数据绑定,绑定pwd
的值,代码如下所示:
<input type="text" maxlength="8" placeholder="密码" v-if="showPwd" v-model="pwd"> <input type="password" maxlength="8" placeholder="密码" v-else v-model="pwd">
3.在旁边控制的按钮上,进行对象样式绑定,显示不同的样式,同时绑定点击事件,将 !showPwd
的值赋值给 showPwd
。在下面的显示中,通过 showPwd
值的不同显示不同的文本,代码如下所示:
<div class="switch_button off" :class="showPwd?'on' : 'off'" @click="showPwd=!showPwd"> <div class="switch_circle" :class="{right: showPwd}"></div> <span class="switch_text">{{ showPwd ? 'abc' : '...'}}</span> </div>
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。