vue实现短信验证码输入框

本文实例为大家分享了vue实现短信验证码输入框的具体代码，供大家参考，具体内容如下

先上最终效果 （此处代码显示的是短信验证码框的效果   其余部分并未放上去）

html

js

data (){
     return {    
       smsCode:'',
    code:new Array(5),
    codeId:['first','second','third','forth','fifth']
      }
   },
     watch:{
  code:function(newValue,oldValue){
   console.log('newValue.length'+newValue.length)
   let tempValue=''
   for(let i=0;i5){
   location=5
   }
   document.getElementById(this.codeId[location-1]).focus()
  }
  },

CSS

.inputStyle{
 width:20%;
 height:100%;
 text-align:center;
 border:none;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。