Vue 根据数组对象的某个属性判断是否相同，动态添加不同的颜色角标，要求角标相同的期数颜色相同，得循环颜色

思路是获取数据后，循环数据，然后把期数拿出来放到一个空的数组对象里面，然后定义一个color数组，遍历有期数的数组颜色，在渲染页面的vue文件中判断渲染的数组的期数与有期数的数组对象的期数是否相等，相等就渲染有期数的对象的颜色

##这是处理数组的js
 data() {
    return {
      microClassroom: [],
      colorList: ["#fbb324", "#ff5a5b", "#977bff", "#55b651"],
 };


##获取数据
 this.folderList = [];
 getMicroClassroom().then((res) => {
        this.microClassroom = res;
        this.microClassroom.forEach((item, index) => {
          if (this.folderList.indexOf(item.folderName) == -1) {
            this.folderList.push({ folderName: item.folderName });
          } else {
            return;
          }
        });
        this.folderList.forEach((m, n) => {
          m.bgColor = this.colorList[n % 4]; //4次一循环，这样期数不固定，也都有相同的颜色
        });
      });

##vue页面代码   核心代码

 <div class="base-room-content">
          <div
            class="room-item"
            v-for="(item, index) in microClassroom"
            :key="index"
          >
            <div class="item-img">
              <div
                class="right-top-img"
                :style="{
                  background: item.folderName == m.folderName ? m.bgColor : '',
                }"
                v-for="(m, n) in folderList"
                :key="n"
              >
                {{ item.folderName }}
              </div>
            </div>
            <div class="room-text" :title="item.title">
              {{ item.title }}
            </div>
          </div>
        </div>