vue，如何多个标签在三个颜色里循环？

Question

如题，比如我有10个标签，希望依次红黄蓝这个顺序，在三个颜色里循环，该如何写代码？

Answer 1

colors = ['#f00', '#0f0', '#00f']
v-for="item in 10" :color="colors[item % colors.length]"

Answer 2

<template>
  <ul>
    <li v-for="item in 10" :key="item">{{ item }}</li>
  </ul>
</template>
<style>
ul li:nth-of-type(3n + 1) {
  color: red;
}
ul li:nth-of-type(3n + 2) {
  color: yellow;
}
ul li:nth-of-type(3n + 3) {
  color: blue;
}
</style>

Answer 3

<ul>
      <li v-for="(item,index) in 10" :style="{color:colorData[index%3]}">{{item}}</li>
</ul>

data() {
      return {
        colorData:['#ff0000','#007dff','#673ab7'],
      }
}