JS 通过index渲染色块问题

Question

有一个需求是这样的样式排列，上下两排色块
1 3 5 7 9 11
2 4 6 8 10 12
用vue渲染这12个元素，想通过一个方法传入元素的index，来改变色块的颜色。
想让1 4 5 8 9 12是一种颜色
2 3 6 7 10 11是另一种颜色
请问这种颜色交叉的算法怎么实现

Answer 1

1 3 5 7 9 11 规律 x % 4 = 1
2 4 6 8 10 12 规律 x % 4 = 0

x % 4 <= 1

Answer 2

css 可以实现

同时满足
奇数行 奇数列
偶数行 偶数列
为一个颜色

偶数行 奇数列
奇数行 偶数列
为一个颜色

例如：

1 calcColor(1,1) 3 calcColor(1,2) 5 calcColor(1,3) 7 calcColor(1,4) 9 calcColor(1,5) 11 calcColor(1,6)
2 calcColor(2,1) 4 calcColor(2,2) 6 calcColor(2,3) 8 calcColor(2,4) 10 calcColor(2,5) 12 calcColor(2,6)