vue v-for循环出来的数组加不同的颜色(颜色循环)

上面方块是由后端返回的数组 需求是每四个方块循环不同的背景颜色
下面展示一些 内联代码片。

// 具体v-for的代码块
<div v-for="(item, index) in appList" :key="index">
	<span  :style="{'background':item.color}"></span> // 方块 样式就不写了
    <span>{
    
    {
    
    系统名称}}</span>
</div>
//  appList 为后端返回数组

// appList 处理
this.appList.forEach((item, index) => {
    
    
	item.color = this.colorList[index%4]
})
// colorList为自定义四种颜色值数组 colorList: ['#2a7aff','#7ed321','#f31876','#f65a5a']
// index%4 根据你的需求取值 我这里是4个一循环

以上因为我的需求比较简单就用的这种方式 如果你的需求也很简单可以试试这种方法