文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue基于input如何实现密码的显示与隐藏功能

2023-06-26 04:11

关注

vue基于input如何实现密码的显示与隐藏功能,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

前言

大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可。但是隐藏的密码一般是 "•" 展示,那我们想要用 "*" 或者其他的符号显示该怎么办呢,今天就教大家用其他的符号代替 "•" 在密码隐藏时展示。

实现效果

vue基于input如何实现密码的显示与隐藏功能

实现思路

首先我们要先在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 实现切换密码的显示与隐藏

data 中定义 showPwd,默认为 false,用来控制密码的显示与隐藏。定义 pwd,默认为空,是密码的值,代码如下所示:

data() {  return {    showPwd: false,    pwd: ''  }}

在密码的显示与隐藏中,有两种输入框,一个是类型为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">

在旁边控制的按钮上,进行对象样式绑定,显示不同的样式,同时绑定点击事件,将 !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>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯