秋天来啦！秋天来啦！田野里就是美丽的图画。花生躲在地下，包着红色的毛毯，住在土黄色的房间里睡大觉。玉米姐姐穿着绿色的裙子，在叶子上跳舞，南瓜爷爷鼓着金黄色的大肚子，坐着高级的南瓜车，一边看风景一边享受。西红柿露出火红火红的脸蛋，正对着我们微笑。谁使秋天这样美？看，田野里的菊花做出了回答，菊花顶着一个爆炸头，在微风中轻轻摇动，好像在说：是勤劳的人们画出了秋天的图画。
本文实例为大家分享了vue实现短信验证码输入框的具体代码，供大家参考，具体内容如下
先上最终效果 （此处代码显示的是短信验证码框的效果 其余部分并未放上去）
html
<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>
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;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()
}
},
CSS
.inputStyle{
width:20%;
height:100%;
text-align:center;
border:none;
}
本文vue如何实现短信验证码输入框到此结束。从风雨中寻找愉悦，在挫折中持续坚韧。小编再次感谢大家对我们的支持！
