vue html循环数组，每个子对象不同颜色的边框

原创于 2021-09-08 11:26:41 发布 · 634 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html

vue 专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何通过JavaScript实现一个数据列表中，根据下标对4取余的结果来动态为每个元素添加不同颜色的CSS类，从而实现实时视觉效果。使用了取余运算符和简单的条件判断，展示了前端动态渲染的灵活性。

效果： 在这里插入图片描述
数据是一个数组dataList:[{},{}…]
颜色有四个颜色，red，blue,green,pink
在循环数据的同时，用下标index除以4取余，根据值添加不同的class

实现：
思路：颜色有四个，长度为4，利用取余的方式：用dataList的下标，处以4，所得的余数总是 0，1，2，3 这四个余数
所以就可以进行判断


<div v-for='(obj,index) in dataList' :key='index'
 :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}">
</div>
<style>


.color1{
border:2px solid red
}
.color2{
border:2px solid blue
}
.color3{
border:2px solid green
}
.color4{
border:2px solid pink
}
</style>