先給大家上個效果圖：
<div class="goods-psd"> <p class="apply-title"> 請輸入支付密碼 </p> <p style="margin: 0.2rem">確認支付 <span>{{password}}</span> </p> <div class="psd-container"> <input class="psd-input" type="password" readonly v-for="(value,index) in passwordGroup" :key="index" :value="value.value"> </div> </div> <div class="input-pan"> <div class="pan-num" v-for="(value,num) in number" :key="num" @click="inputPsd(value)">{{value}}</div> </div></div>不管邏輯有沒有搞懂，先把樣式寫出來總是沒錯啦~
思路梳理
1.輸入框使用for循環，循環出6個input； 2.下面的按鍵使用for循環，便于后期存儲記錄； 3.將所輸入的密碼放入到pasgroup數組中； 4.定義輸入框的下標，將pasgroup數組內容按照下標依次放入input內； 5.開始代碼啦~
代碼
data () { return { popupVisible1: true, realInput: '', password: '111', passwordGroup: [], number: ['1','2','3','4','5','6','7','8','9','取消','0','刪除'], pasgroup: [], currentInputIndex:-1 } }在data內定義好我們需要的元素
initPasswordGroup () { this.passwordGroup=[]; for(var i=0;i<6;i++){ this.passwordGroup.push({ value:null }) }}循環出input，將其內容賦值為value:null，在界面上顯示出6個輸入框
watch: { currentInputIndex (val) { if(val == 5){ console.log(this.pasgroup) }else if(val <= -1){ this.currentInputIndex = -1 } } }監聽數組下標的變化，當下標到5的時候打印出該數組
inputPsd (value) { switch (value) { case '取消': this.currentInputIndex = -1 this.pasgroup = [] this.initPasswordGroup () break; case '刪除': this.pasgroup.pop() console.log(this.pasgroup) // this.currentInputIndex 下標值,刪除添加時改變 this.passwordGroup[this.currentInputIndex].value = null this.currentInputIndex-- console.log(this.passwordGroup) break; default: this.pasgroup.push(value) this.currentInputIndex++ this.passwordGroup[this.currentInputIndex].value = value } },獲取到所點擊的元素，當點擊‘取消'時清空input 輸入框內的內容，清除數組；當點擊‘刪除'時，下標值依次減減，將value重置為null； 當點擊其他數字時，下標值依次增加，將數組pasgroup[]里面的內容寫進passwordGroup[]里面，在輸入框中展示。
總結
以上所述是小編給大家介紹的Vue仿支付寶支付功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
