v-for 循环数据对象，css标签引用值

原来的代码：要实现 遍历对象top，还要实现样式c0,c1,c2,c3

top{

        人员总数：66

        车辆总数：66

        违规记录：66

        进出记录：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
          >

 遍历后的代码：

value：对象的值

key：   对象的键

i：        对象的下标（0开始）

css处理 多个并引用遍历对象里面的值，要用[ ] 数组包着

<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>