v-for loop data object, css tag reference value

Original code : To implement traversal object top, styles c0, c1, c2, c3 must also be implemented

top{

        Total number of personnel: 66

        Total number of vehicles: 66

        Violation record: 66

        In and out records: 66

}

         <el-col :span="6">
            <div class="demo-color-box c0">
              <div class="rycs">人员总数</div>
              <div class="rysl">66</div>
            </div></el-col
          >
          <el-col :span="6">
            <div class="demo-color-box c1">
              <div class="rycs">车辆总数</div>
              <div class="rysl">66</div>
            </div></el-col
          >
          <el-col :span="6">
            <div class="demo-color-box c2">
              <div class="rycs">违规记录</div>
              <div class="rysl">66</div>
            </div></el-col
          >
          <el-col :span="6">
            <div class="demo-color-box c3">
              <div class="rycs">进出记录</div>
              <div class="rysl">66</div>
            </div></el-col
          >

 Code after traversal:

value: the value of the object

key: the key of the object

i: the index of the object (starting from 0)

When css handles multiple and referenced values ​​in the traversal object, it must be wrapped in [ ] array.

<el-col :span="6" v-for="(value, key, i) in top" :key="i">
            <div :class="['demo-color-box', 'c' + i]">
              <div class="rycs">{
   
   { key }}</div>
              <div class="rysl">{
   
   { value }}</div>
            </div>
 </el-col>