您好,登錄后才能下訂單哦!
這篇“Vue怎么實現(xiàn)支付功能”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue怎么實現(xiàn)支付功能”文章吧。
代碼如下:
<div class="goods-psd"> <p class="apply-title"> 請輸入支付密碼 </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>
思路梳理
1.輸入框使用for循環(huán),循環(huán)出6個input; 2.下面的按鍵使用for循環(huán),便于后期存儲記錄; 3.將所輸入的密碼放入到pasgroup數(shù)組中; 4.定義輸入框的下標(biāo),將pasgroup數(shù)組內(nèi)容按照下標(biāo)依次放入input內(nèi); 5.開始代碼啦~
代碼
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個輸入框
watch: { currentInputIndex (val) { if(val == 5){ console.log(this.pasgroup) }else if(val <= -1){ this.currentInputIndex = -1 } } }
監(jiān)聽數(shù)組下標(biāo)的變化,當(dāng)下標(biāo)到5的時候打印出該數(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)值,刪除添加時改變 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 } },
獲取到所點擊的元素,當(dāng)點擊‘取消'時清空input 輸入框內(nèi)的內(nèi)容,清除數(shù)組;當(dāng)點擊‘刪除'時,下標(biāo)值依次減減,將value重置為null; 當(dāng)點擊其他數(shù)字時,下標(biāo)值依次增加,將數(shù)組pasgroup[]里面的內(nèi)容寫進(jìn)passwordGroup[]里面,在輸入框中展示。
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
以上就是關(guān)于“Vue怎么實現(xiàn)支付功能”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。