支付密码框实现

超简单实现方式：

 <div class="vcode-box">
   <input type="text" class="vcode_value" v-model="vCode" maxlength="6" />
    <div class="vcode_value_box">
      <input
        type="text"
        maxlength="1"
        v-for="(item,index) in 6"
        :key="index"
        v-model="vCode.substr(index,1)"
      />
    </div>
  </div>

css代码

  .vcode_value {
    width: 280px;
    height: 38px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -140px;
    background: none;
    opacity: 0;
  }
  .vcode_value_box {
    width: 100%;
    margin-top: 20px;
    input {
      width: 38px;
      height: 38px;
      margin-left: 10px;
      border: 1px solid #ccc;
      text-align: center;
      font-size: 16px;
    }
    input:nth-child(1) {
      margin-left: 0px;
    }
  }
}

js代码

//vue
 data() {
    return {
      //信息
      vCode: "",
      vCodeControl: {
        countDown: "获取验证码",
        isClick: false,
        timer: null
      }
    };
  },

效果图