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

最新推荐文章于 2025-04-12 19:31:36 发布

原创最新推荐文章于 2025-04-12 19:31:36 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

文章展示了如何在Vue.js中使用v-for指令遍历一个对象，并动态地应用样式。代码示例包括了原始的HTML/CSS结构，以及转换后的遍历代码，其中使用了[index]语法来结合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>