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

一只快乐的小咩咩

于 2021-10-13 16:41:07 发布

阅读量7.6k

点赞数 8

分类专栏： vue css 文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/miem_yang/article/details/120746647

版权

JavaScript Vue 数组处理背景颜色循环逻辑

关键词由优快云通过智能技术生成

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

css

2 篇文章

订阅专栏

该博客介绍了如何通过JavaScript处理后端返回的数组，利用数组索引取模运算实现每四个元素循环不同背景色的效果。示例代码展示了在Vue中使用v-for指令结合CSS样式动态设置方块背景色，并提供了处理数组的逻辑和颜色列表。这种方法适用于简单的颜色循环需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

// 具体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个一循环