vue输入框隐藏,
本文主要介绍vue基于输入的密码显示和隐藏功能。文章最后介绍了vue如何实现切换密码的显示和隐藏效果。本文通过示例代码给大家做了非常详细的介绍，有需要的朋友可以参考一下。
前言
众所周知，一般情况下，我们是看不到输入框中的密码的。只有当我们点击小图标查看密码时，密码才会出现。实现起来也很简单。只需点击图标来改变输入的类型属性。但是隐藏的密码一般都是用 显示的，那么如果要用 * 或者其他符号来显示的话应该怎么做呢？今天，我们将教大学使用其他符号而不是来显示隐藏的密码。
实现效果
实现思路
1.首先，我们需要在数据中定义一个变量来控制小图标的显示和隐藏；
2.循环遍历页面中数据的隐私(关键内容)得到字符串长度的长度；
3.得到密钥的长度后，先把它分成一个字符串数组，以便以后插入；
4.然后通过拼接方法插入到字符串数组中。拼接有三个参数。第一个参数是必需的，它是插入元素的位置。第二个参数表示要插入的元素数量，第三个参数表示要插入的元素是什么。
5.最后，我们可以通过join方法将字符串数组转换为字符串。
话不多说，直接上实例代码。
模板
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/79e 7dg . png /span
span v-if= codeType==0 img @ click= conceal src= https://S4 . ax1x . com/2022/01/07/79 eown . png /span
/div
/模板
脚本
导出默认值{
data() {
返回{
隐私： 123456789123456789123456789 ，//关键内容
CodeType: 0，//hidden等于1时显示控制键显示，等于0时隐藏。
星号： ，//要插入的星号*
}
},
已安装(){
//遍历所获得的密钥的长度。
for(var I=0；我这.私处.长度；i ) {
let=this . star . split( )//拆分为字符串数组
star . splice(this.privates.length，this . privates . length， * )//添加到数组中
This.star=star.join() //将数组转换为字符串
}
},
方法：{
//显示事件
显示(){
this.codeType=0
},
//隐藏事件
隐藏(){
this.codeType=1
},
}
}
/脚本
样式范围。私有{
显示器：flex
对齐-项目：居中；
}。私有img {
宽度：20px
高度：20px
垂直对齐：居中；
光标：指针；
左边距：9px
}。特殊{
位置：相对；
top:4px；
}
/风格
至此，这个小功能实现了！
补充：vue 如何实现切换密码的显示与隐藏
1.vue实现了切换密码的显示和隐藏。
1.在data中定义showPwd，默认为false，用于控制密码的显示和隐藏。定义pwd，默认为空，是password的值。代码如下：
data() {
返回{
showPwd:假，
密码：“”
}
}
2.在显示和隐藏密码时，有两种类型的输入框，一种是用于显示密码的文本类型的文本框，另一种是用于隐藏密码的密码类型的密码框。由于showPwd的默认值为false，设置文本的框默认为v-if，设置密码的框默认为v-else，默认不显示密码。同时还进行了v-model的双向数据绑定，绑定了pwd的值。代码如下：
type= text maxlength= 8 placeholder= password v-if= show pwd v-model= pwd
type= password maxlength= 8 placeholder= password v-else v-model= pwd
3.在旁边控制的按钮上，绑定对象样式，显示不同的样式，同时绑定click事件。威尔。showPwd的值被赋给showPwd。在下面的显示中，不同的文本由不同的showPwd值显示，代码如下：
div class= switch _ button off :class= show pwd？on : off @click=showPwd=！ showPwd
div class= switch _ circle :class= { right:show pwd } /div
span class= switch _ text“{ show pwd？abc : . } span
/div
关于vue基于输入的密码显示和隐藏功能的这篇文章到此为止。有关vue密码显示和隐藏的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。