vue六个框的验证码

div部分

< div class= "verification-code" >

< input type= "tel" maxlength= "6" class= "realInput" v-model=" realInput" @keyup=" getNum()" @keydown=" delNum()" id= "focusid" >

< ul class= "write-input" >

< li v-for=" disInput in disInputs" >< input class= "disInput" type= "tel" maxlength= "1" v-model=" disInput. value" @click=" getbackMoney" ></ li >

</ ul >

</ div >

script部分

//验证码输入功能

getbackMoney() {

this. messagepacket = true;

var idObj = document. getElementById( "focusid");

idObj. focus();

//点击进来自动获取焦点

},

getbackMoneyclock() {

this. messagepacket = false;

},

getNum() {

for ( var i = 0; i < this. realInput. length; i++) {

this. disInputs[ i]. value = this. realInput. charAt( i);

// 表示字符串中某个位置的数字，即字符在字符串中的下标。

}

},

delNum() {

var oEvent = window. event;

if ( oEvent. keyCode == 8) {

if ( this. realInput. length > 0) {

this. disInputs[ this. realInput. length - 1]. value = "";

}

}