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 實現切換密碼的顯示與隱藏
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>
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。