vue中根据数据让相同的数据显示一样的颜色

好久没写了 随便写写直接上代码

这里主要是动态绑定颜色

   <ul>
      <li v-for="(list,index) in TabList" :key="index" class="box" :style="{color:list.color}">
        <span>{{list.name}}</span>
        <span>{{list.sex}}</span>
        <span>{{list.invoice}}</span>
        <span>{{list.age}}</span>
      </li>
    </ul>

js模块主要处理拿到的数据

   methods: {
      getlist() {
        var arr = this.TabList;
        var newArr =[]
        var color =[]
        for(var i=0;i<arr.length;i++){
          newArr.push(arr[i].invoice)
          // 去重
          newArr = Array.from(new Set(newArr))
        }
        for(var j=0;j<newArr.length;j++){
        //生成对应数量的颜色 随机色不好看 如果数据重复量小 可以自己写一组颜色用 够用就行## 标题
          color.push(this.getColor())
          for(var k=0;k<arr.length;k++){
            if(newArr[j] === arr[k].invoice){
              arr[k].color = color[j]
            }
          }
        }
      },
      getColor(){
        //16进制随机数生成 颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
        return color;
      }
    },
    mounted() {
      this.getlist();
    }