前言
大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让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 如何实现切换密码的显示与隐藏
一、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>到此这篇关于vue基于input实现密码的显示与隐藏功能的文章就介绍到这了,更多相关vue密码显示与隐藏内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！