vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色
更新時(shí)間：2024年03月20日 09:54:04 作者：喂！你的辣條?
這篇文章主要介紹了vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue給某個(gè)數(shù)據(jù)字段添加顏色
第一步 在某個(gè)標(biāo)簽內(nèi)添加
根據(jù)getGoodsTypeColor方法先判斷某個(gè)標(biāo)簽的狀態(tài)值 根據(jù)狀態(tài)值去獲取顏色
vue根據(jù)數(shù)據(jù)讓相同的數(shù)據(jù)顯示一樣的顏色
好久沒(méi)寫了 隨便寫寫直接上代碼
這里主要是動(dòng)態(tài)綁定顏色
<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模塊主要處理拿到的數(shù)據(jù)
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++){
//生成對(duì)應(yīng)數(shù)量的顏色 隨機(jī)色不好看 如果數(shù)據(jù)重復(fù)量小 可以自己寫一組顏色用 夠用就行## 標(biāo)題
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進(jìn)制隨機(jī)數(shù)生成 顏色值
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();
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2為何能通過(guò)this訪問(wèn)到data與methods的屬性
這篇文章主要介紹了Vue2為何能通過(guò)this訪問(wèn)到data與methods的屬性，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了Vue中webpack的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法
這篇文章主要介紹了使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue-cli3.0項(xiàng)目打包后如何修改訪問(wèn)后端地址
這篇文章主要介紹了vue-cli3.0項(xiàng)目打包后如何修改訪問(wèn)后端地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
今天小編就為大家分享一篇Vue中保存數(shù)據(jù)到磁盤文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue 獲取及修改store.js里的公共變量實(shí)例
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
隨著Vue的使用越來(lái)越多,對(duì)Vue的其他知識(shí)點(diǎn)也開(kāi)始逐漸多了解一點(diǎn),這次做頁(yè)面上的計(jì)算,用了Watch偵聽(tīng)器,這篇文章主要給大家介紹了關(guān)于Vue中偵聽(tīng)器基本用法的相關(guān)資料,需要的朋友可以參考下2021-08-08
在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語(yǔ)法糖,父組件通過(guò)給子組件定義ref訪問(wèn)其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下2024-06-06