vue,如何多个标签在三个颜色里循环?

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

阅读 3.3k
3 个回答
colors = ['#f00', '#0f0', '#00f']
v-for="item in 10" :color="colors[item % colors.length]"
<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>
新手上路,请多包涵
<ul>
      <li v-for="(item,index) in 10" :style="{color:colorData[index%3]}">{{item}}</li>
</ul>
data() {
      return {
        colorData:['#ff0000','#007dff','#673ab7'],
      }
}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题