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

效果：
数据是一个数组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>

这样可以了！！