好久没写了 随便写写直接上代码
这里主要是动态绑定颜色
<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();
}