Vue仿支付寶支付功能

第Vue仿支付寶支付功能div

請輸入支付密碼

p確認(rèn)支付span{{password}}/span/p

div

inputtype="password"readonlyv-for="(value,index)inpasswordGroup":key="index":value="value.value"

/div

/div

div

divv-for="(value,num)innumber":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(vari=0;ii++){

this.passwordGroup.push({

value:null

}

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

watch:{

currentInputIndex(val){

if(val==5){

console.log(this.pasgroup)

}elseif(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[]里面，