vue基于input如何實(shí)現(xiàn)密碼的顯示與隱藏功能

vue基于input如何實(shí)現(xiàn)密碼的顯示與隱藏功能，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

前言

大家都知道，一般情況下，輸入框的密碼我們是看不到密碼的，只有當(dāng)我們點(diǎn)擊查看密碼的小圖標(biāo)時，密碼才會顯現(xiàn)出來，實(shí)現(xiàn)起來也非常簡單，通過點(diǎn)擊圖標(biāo)讓input的type屬性變化即可。但是隱藏的密碼一般是 "•" 展示，那我們想要用 "*" 或者其他的符號顯示該怎么辦呢，今天就教大家用其他的符號代替 "•" 在密碼隱藏時展示。

實(shí)現(xiàn)效果

實(shí)現(xiàn)思路

1.首先我們要先在data中定義一個變量用來控制小圖標(biāo)的顯示與隱藏；
2.在頁面中循環(huán)遍歷data中的privates(密鑰內(nèi)容)，拿到字符串的長度length；
3.拿到密鑰的長度后，先把它分割成字符串?dāng)?shù)組，用于后面插入；
4.然后通過splice方法插入到字符串?dāng)?shù)組中，splice有三個參數(shù)，第一個參數(shù)是必要的，是插入元素的位置，第二個參數(shù)的意思是要插入的元素?cái)?shù)量，第三個參數(shù)的意思是要插入的元素是什么；
5.最后我們將字符串?dāng)?shù)組通過join方法轉(zhuǎn)換成字符串即可。

話不多說，直接上實(shí)例代碼

<template>
    <div class="private">
        <!--// 顯示內(nèi)容: ==0時顯示*，==1時顯示密鑰內(nèi)容 -->
        <span v-if="codeType == 1">{{privates}}</span>
        <span class="special" v-if="codeType == 0">{{star}}</span>
        <!--// 小圖標(biāo): ==0時展示隱藏圖標(biāo)，==1時展示顯示圖標(biāo)-->
        <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", //密鑰內(nèi)容
                codeType: 0, //控制密鑰顯示隱藏 等于1時顯示，等于0時隱藏
                star: "", //要插入的星星*
            }
        },
        mounted() {
            // 循環(huán)遍歷拿到密鑰的長度
            for (var i = 0; i < this.privates.length; i++) {
                let star = this.star.split('') //分割成字符串?dāng)?shù)組
                star.splice(this.privates.length, this.privates.length, '*') //添加到數(shù)組
                this.star = star.join('') //將數(shù)組轉(zhuǎn)換為字符串
            }
        },
        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>

至此這個小功能就實(shí)現(xiàn)啦！

補(bǔ)充：vue 如何實(shí)現(xiàn)切換密碼的顯示與隱藏

一、vue 實(shí)現(xiàn)切換密碼的顯示與隱藏

1.在 data 中定義 showPwd，默認(rèn)為 false，用來控制密碼的顯示與隱藏。定義 pwd，默認(rèn)為空，是密碼的值，代碼如下所示：

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

2.在密碼的顯示與隱藏中，有兩種輸入框，一個是類型為text的文本框用來展示密碼，另一個是類型為password的密碼框用來隱藏密碼。由于showPwd的默認(rèn)值為false，所示設(shè)置text的框?yàn)?code>v-if，默認(rèn)顯示密碼，而設(shè)置password的框?yàn)?v-else，默認(rèn)不顯示密碼，同時也進(jìn)行v-model的雙向數(shù)據(jù)綁定，綁定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.在旁邊控制的按鈕上，進(jìn)行對象樣式綁定，顯示不同的樣式，同時綁定點(diǎn)擊事件，將 !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>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。