vue实现数字验证码，多个输入框

1. html

<div class="code-wrapper">
    <div class="code-item" v-for="(index, item) in number" :key="index">{{ code[item] }}</div>
    <input class="code-input" v-model="code" :maxlength="number" type="number" pattern="[0-9]*"/>
</div>

2. js

export default {
  data () {
    return {
      code: '',
      number: 6
    }
  }
}

3. css

  .code-wrapper {
    position: relative;
    width: 100%;
    margin-top: .85rem;
    display: flex;
    justify-content: space-between;
    .font-size(36px);
    font-weight: bold;

    .code-item {
      width: 1.07rem;
      height: 1.09rem;
      line-height: 1.09rem;
      border-bottom: .03rem solid @border-color;
      text-align: center;
    }

    .code-input {
      height: 1.09rem;
      position: absolute;
      outline: none;
      color: transparent;
      text-shadow: 0 0 0 transparent;
      width: 200%;
      margin-left: -100%;
      border: none;
      background: none;
      -webkit-appearance: none;
    }
  }
//width:200%; margin-left:-100%;是为了优化手机端光标问题

原文地址：https://blog.csdn.net/lovefive5/article/details/84257062