vue实现短信验证码输入框

<div class="code">
  <input id="first" class="inputstyle" v-model="code[0]"
  style="border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;"
  type="text"/>
  <input id="second" class="inputstyle" v-model="code[1]"style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="third" class="inputstyle" v-model="code[2]"style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="forth" class="inputstyle" v-model="code[3]" style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="fifth"class="inputstyle" v-model="code[4]"
  style="border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-left:1px solid #c6c6c6;" 
  maxlength="1"
  type="text"/>
</div>

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;i<newvalue.length;i++){
   if(i==5){
    console.log(i)
    break
   }
   if(newvalue[i]){
    tempvalue=tempvalue+newvalue[i] 
   }
   }
   this.smscode=tempvalue
   console.log('smscode '+this.smscode)
   let m=tempvalue.split("")
   let location=0
   for(let i=0;i<newvalue.length;i++){
   if(m[i]&&i<5){
    location++
    newvalue[i]=m[i]
   }else{
    newvalue[i]=''
   }
   }
   // console.log(this.codeid[i])
   if(location<1){
   location=1
   }else if(location>5){
   location=5
   }
   document.getelementbyid(this.codeid[location-1]).focus()
  }
  },

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