vue前端使用v-for 循环出好多个正方形数字方框并且填充数据

话不多说上先图片

最终效果背景请按照自己的来

这是html部分

这是css部分

<style lang="less" >

.security-code-container {

// flex-direction: row-reverse;

  margin:0;

padding:20px 0;

display:flex;

justify-content:center;

.field-wrap {

flex-direction:row-reverse;

list-style:none;

display:block;

border:1px solid #66ffff;

// border: 1px solid #eee;

  height:4.4vh;

width:2.06vw;

font-size:18px;

text-align:center;

overflow:hidden;

// background-color: #fff;

  margin-right:5px;

.char-field {

flex-direction:row-reverse;

font-style:normal;

}

&.on {

border:1px solid #0e88ef;

}

}

}

.input-code {

width:100%;

height:30px;

position:absolute;

left: -999999999999px;

opacity:0;

z-index: -1;

}

.clean {

width:100%;

box-sizing:border-box;

text-align:right;

color:#0e88ef;

font-size:12px;

padding:0 10px;

}