【vue】vue组件循环获取样式

vue中组件循环获取样式

场景：

首先，组件内定义一个颜色数组，然后就是循环调用组件的时候，每个组件的颜色都不同。
在修改的时候，发现可以用下标来实现，然后就是计算数值。
在测试过程中，发现了一个简单的方法：% 取整。
比如颜色有三个。第五个循环取色，那就是第二个橘黄色。传入组件内下标4。
然后4%3=1，这个1就是颜色数组内对应的颜色。

代码

<template>
  <div class="public-dept-task">
    <i
      class="fa fa-bookmark"
      aria-hidden="true"
      :style="[{ color: getColor }]"
    ></i>
    <div class="content">
      <div class="title">{{ data.dutyname }}</div>
      <div class="info">{{ data.remark }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'public-dept-task',
  data() {
    return {
      colors: ['#e43d39', '#ff7800', '#ffa352']
    }
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number
    }
  },
  components: {},
  computed: {
    getColor() {
      let index2 = this.index
      return this.colors[index2 % this.colors.length]
    }
  },
  created() {},
  onload() {},
  onShow() {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
.public-dept-task {
  display: flex;
  height: 60px;
  .fa {
    width: 50px;
    font-size: 65px;
  }
  .content {
    .title {
      font-size: 13px;
      color: black;
    }
    .info {
      font-size: 15px;
      color: #999;
    }
  }
}
</style>