如何解决三个颜色循环一遍，可循环多次


<template>
  <div class="box1">
    <div class="box2" v-for="(item, index) in data_list" :key="index" :style="[spacing]" >
      <div class="box2_1" :class="top[index]" :key="index" ></div>
      <div class="box2_2">{{ item.date }}</div>
      <div class="box2_3 xx">{{ item.License_plate }}</div>
      <div class="box2_4 xx">{{ item.state }}</div>
      <div class="box2_5 xx">{{ item.park }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    spacing: {},
    data_list: {
      type: Array,
    },
  },
  data() {
    return {
      top: ["top1", "top2", "top3"],
    };
  },
  methods: {
    fn1(){
      alert(66)
    }
  },
  created:{
  }
};
</script>
<style scoped>
.top1 {
  background: #FC4567;
}
.top2 {
  background: #C25EC4;
}
.top3 {
  background: #2F8DF4;
}

.box2 {
  /* width: 2.838542rem; */
  height: .260417rem;
  font-family: "微软雅黑";
  font-weight: bold;
  font-size: .083333rem;
  /* outline: rgb(7, 7, 7) .005208rem solid; */
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: .109375rem;
  /* padding-left: .010417rem; */
  
}
.box2_1 {
  width: .020833rem;
  height: .15625rem;
}
.box2_2 {
  margin-left: .036458rem;
}
.box2_1:nth-child(3) {
  background: #ff0000;
}
.xx {
  padding-left: .182292rem;
}
</style>

想要这三个颜色每三个数据就遍历一次，跪求

https://www.w3school.com.cn/cssref/selector_nth-child.asp

用nth-child选择器

看看这个html

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(3n)
{
background:grey
;
}
p:nth-child(3n+2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>


<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

封装成方法啊，你问题能再具体点吗

<template>
  <div class="box1">
    <div
      class="box2"
      v-for="(item, index) in data_list"
      :key="index"
      :style="[spacing]"
    >
      <div class="box2_1 top" :key="index">777777777</div>
      <div class="box2_2">{{ item.date }}</div>
      <div class="box2_3 xx">{{ item.License_plate }}</div>
      <div class="box2_4 xx">{{ item.state }}</div>
      <div class="box2_5 xx">{{ item.park }}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data_list: [
        { date: 123, License_plate: 123, state: 123, park: 123 },
        { date: 123, License_plate: 123, state: 123, park: 123 },
        { date: 123, License_plate: 123, state: 123, park: 123 },
        { date: 123, License_plate: 123, state: 123, park: 123 },
      ],
      spacing: {},
      top: ["top1", "top2", "top3"],
    };
  },
  methods: {},
};
</script>
<style >
.box1>.box2:nth-child(3n)>.top {
    background: green;
}
.box1>.box2:nth-child(3n-1)>.top {
    background: blue;
}
.box1>.box2:nth-child(3n-2)>.top {
    background: red;
}
</style>

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632