现在的短信验证码一般为4位或6位，则页面中会相应的显示4个或6个文本框.好多网站需求都有此功能，今天小编给大家分享基于vue.js实现移动端短信验证码功能，需要的朋友参考下吧
现在的短信验证码一般为4位或6位，则页面中会相应的显示4个或6个文本框，如图所示
当点击注册进入到输入验证码页面的时候，第一个框自动获取光标，依次输入，不可直接输入第三个或第四个框的值，
input输入框是循环出来的，代码如下：
第一第三行不解释，相信聪明的你可以看懂， 让我们一起看第二行，keyup是当键盘按下的时候执行的函数，ref则为传值，
data () { return { …… sms: { numbers: 4, msg: [], show: [], position: 0 }, …… } } _setSmsInputDisplay () { var arr = [] for (var i = 0; i = this.sms.numbers - 1 - this.sms.position && i { this.$router.push('/main') console.log(r) }) }, sms_input (e) { if (e.keyCode === 8) { // 删除 if (this.sms.position > 0) { this.sms.position-- this.sms.msg.splice(-2, 1) this.sms.msg.unshift(null) this._setSmsInputDisplay() } } else if (e.keyCode >= 48 && e.keyCode <= 57) { // 仅可以输入数字 if (this.sms.position 如此，便可实现验证码输入功能，代码清晰，聪明的你若有疑问，随时留言，我看到后定会秒回。
以上就是Vue.js实现移动端短信验证码功能的详细内容，更多请关注0133技术站其它相关文章！
