前言

大家都知道，一般情況下，輸入框的密碼我們是看不到密碼的，只有當我們點選檢視密碼的小圖示時，密碼才會顯現出來，實現起來也非常簡單，通過點選圖示讓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>

至此這個小功能就實現啦！

補充： 如何實現切換密碼TrPBRfxt的顯示與隱藏

一、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的值，程式碼如下所示：

&TrPBRfxtlt;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密碼顯示與隱藏內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！