這篇文章主要介紹了Vue如何實(shí)現(xiàn)支付寶支付功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了荔灣免費(fèi)建站歡迎大家使用！

先給大家上個(gè)效果圖：

<div class="goods-psd">
  <p class="apply-title">
   請(qǐng)輸入支付密碼
  </p>
  <p >確認(rèn)支付 <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>

不管邏輯有沒(méi)有搞懂，先把樣式寫(xiě)出來(lái)總是沒(méi)錯(cuò)啦~

思路梳理

1.輸入框使用for循環(huán)，循環(huán)出6個(gè)input； 2.下面的按鍵使用for循環(huán)，便于后期存儲(chǔ)記錄； 3.將所輸入的密碼放入到pasgroup數(shù)組中； 4.定義輸入框的下標(biāo)，將pasgroup數(shù)組內(nèi)容按照下標(biāo)依次放入input內(nèi)； 5.開(kāi)始代碼啦~

代碼

data () {
  return {
   popupVisible1: true,
   realInput: '',
   password: '111',
   passwordGroup: [],
   number: ['1','2','3','4','5','6','7','8','9','取消','0','刪除'],
   pasgroup: [],
   currentInputIndex:-1
  }
 }

在data內(nèi)定義好我們需要的元素

initPasswordGroup () {
 this.passwordGroup=[];
 for(var i=0;i<6;i++){
  this.passwordGroup.push({
    value:null
  })
 }
}

循環(huán)出input，將其內(nèi)容賦值為value:null，在界面上顯示出6個(gè)輸入框

watch: {
  currentInputIndex (val) {
   if(val == 5){
    console.log(this.pasgroup)
   }else if(val <= -1){
    this.currentInputIndex = -1
   }
  }
 }

監(jiān)聽(tīng)數(shù)組下標(biāo)的變化，當(dāng)下標(biāo)到5的時(shí)候打印出該數(shù)組

inputPsd (value) {
   switch (value) {
    case '取消':
     this.currentInputIndex = -1
     this.pasgroup = []
     this.initPasswordGroup ()
     break;
    case '刪除':
     this.pasgroup.pop()
     console.log(this.pasgroup)
     // this.currentInputIndex 下標(biāo)值,刪除添加時(shí)改變
     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
   }
  },

獲取到所點(diǎn)擊的元素，當(dāng)點(diǎn)擊‘取消'時(shí)清空input 輸入框內(nèi)的內(nèi)容，清除數(shù)組；當(dāng)點(diǎn)擊‘刪除'時(shí)，下標(biāo)值依次減減，將value重置為null； 當(dāng)點(diǎn)擊其他數(shù)字時(shí)，下標(biāo)值依次增加，將數(shù)組pasgroup[]里面的內(nèi)容寫(xiě)進(jìn)passwordGroup[]里面，在輸入框中展示。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue如何實(shí)現(xiàn)支付寶支付功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)題目：Vue如何實(shí)現(xiàn)支付寶支付功能-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://www.yijiale78.com/article6/dehdog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、ChatGPT、靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、軟件開(kāi)發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)