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 如何实现切换密码的显示与隐藏

一、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密码显示与隐藏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue实现密码显示隐藏切换功能

    先给大家分享效果图: 具体实现代码如下所示: html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img :src="this.registration_da

  • Vue基于iview实现登录密码的显示与隐藏功能

    目录 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 1.背景 近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果

  • vue+elementUi 实现密码显示/隐藏+小图标变化功能

    vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码. [效果图] [html] // 前后代码[略] <el-form-item label="密码" prop="pwd"> <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请

  • vue实现密码显示与隐藏按钮的自定义组件功能

    思路 实现该组件有两个思路,一个使用v-model进行双向绑定,一个是使用prop的.sync修饰符.父子组件通信. 1.v-model形式 v-model的实现需要在自定义组件中自定义一个inputvalue值,因为vue中的父子组件传递机制问题,在组件中直接修改props注入的key字段时,vue会给出错误.子组件中定义inputvalue字段,用于子组件中input元素的值的双向绑定,子组件中的input数据绑定可以使用v-model,也可以使用实现v-model的原理语法糖,下面两种方式

  • vue实现密码显示隐藏功能的思路详解

    效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式: 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标. 页面布局 <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 --

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

    前言 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可.但是隐藏的密码一般是 "•" 展示,那我们想要用 "*" 或者其他的符号显示该怎么办呢,今天就教大家用其他的符号代替 "•" 在密码隐藏时展示. 实现效果 实现思路 1.首先我们要先在data中定义一个变量用来控制小图标的显示与隐藏:2.在页面中循环遍历data中的p

  • 基于PyQt5实现状态栏(statusBar)显示和隐藏功能

    首先,讲述要解决的两个问题以及解决问题的代码: 1.将鼠标放置于菜单栏上状态栏永久消失的问题(这个问题需要仔细观察才能注意到) # 此覆盖父类函数: 覆盖方法: 为了克服 将鼠标放置于菜单栏上 状态栏就消失的问题: def event(self, QEvent): if QEvent.type() == QEvent.StatusTip: if QEvent.tip() == "": QEvent = QStatusTipEvent("ready!") # 此处为要

  • el-input 标签中密码的显示和隐藏功能的实例代码

    效果展示: 密码隐藏: 密码显示: 代码展示: 一:<el-input>标签代码 <el-form-item label="密码" prop="password"> <el-input :type="passw" v-model="adduser.password" style="width: 300px;" > <%-- input中加图标必须要有slot=&qu

  • JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效果图: <ul class="form-area"> <li> <div class="item-content"> <div class="item-input"> <input type=&q

  • 基于vue 实现表单中password输入的显示与隐藏功能

    实现效果: 点击 "眼睛" 的时候显示与隐藏 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  • JS实现根据密码长度显示安全条功能

    大家在一些网站上经常可以看到数码密码会根据输入的密码长度显示安全条功能,此功能基于js如何实现的呢?下面看下实现代码,具体代码如下所示: //根据密码长度显示安全条 <ul class="clear"> <li>密 码:</li> <li> <input type="password" id="pwd" name="pwd" class="in" onK

  • vue基于element-ui的三级CheckBox复选框功能的实现代码

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,下面通过本文给大家讲解实现方法. 效果图预览: 首先是页面布局,当然也可已使用table,但是自己用flex布局后面更容易增删改查其他功能 <div class="deliverySetting-table"> <div class="table-head"> <div clas

  • Android 密码 显示与隐藏功能实例

    效果: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android

  • vue.js使用v-if实现显示与隐藏功能示例

    本文实例讲述了vue.js使用v-if实现显示与隐藏功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

随机推荐