vue实现给某个数据字段添加颜色
作者：喂！你的辣条¿
这篇文章主要介绍了vue实现给某个数据字段添加颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue给某个数据字段添加颜色
第一步 在某个标签内添加
根据getGoodsTypeColor方法先判断某个标签的状态值 根据状态值去获取颜色
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();
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。