先看效果圖

點擊后發(fā)生改變

開始上代碼
html部分

<div class="left-circle"><div class="whole-circle" ref="wholeCircle"></div><div class="whole-list"><ul><li v-for="(item, index) in newArr" :key="index"><divclass="icon":class="{ iconactived: spanIndex.indexOf(index) > -1 }":style="{ background: item.text }"@click="changeCicle(item, index)"></div><span class="name">{{ item.name }}</span><span class="value">{{ item.value }}</span><span class="unit">單 <span>|</span></span><span class="type">{{ item.type }}</span></li></ul></div></div>

css部分代碼

.left-circle {display: flex;padding-left: 92px;.whole-circle {width: 60%;height: 100%;}.whole-list {width: 40%;height: 100%;ul {li {display: flex;align-items: center;padding: 20px 10px;span {margin: 0 10px;}.icon {width: 12px;height: 12px;border-radius: 50%;cursor: pointer;}.iconactived {background: #cccccc !important;}.name {font-size: 22px;font-weight: 500;color: #3aaeff;}.value {font-size: 38px;font-weight: bold;color: #ffffff;}.type {color: #00d9ff;font-size: 30px;font-weight: bold;}.unit {display: flex;margin: 0;font-size: 22px;font-weight: 300;color: #ffffff;span {opacity: 0.3;margin: 0 2px;}}}}}}

vue3.0JS部分關(guān)鍵代碼
關(guān)于ref這個響應式引用可以看官網(wǎng)帶 ref 的響應式變量

import { ref } from "vue"; //需要引入ref相應變量setup() {const wholeCircle = ref(null);const isactive = ref(0); //選中切換的名字const spanIndex = ref([]); //選中icon的數(shù)組const dataList = [{ value: 758, name: "付款", type: "30%" },{ value: 425, name: "接單", type: "20%" },{ value: 565, name: "發(fā)貨", type: "10%" },{ value: 6452, name: "攬收", type: "15%" },{ value: 4905, name: "簽收", type: "6%" },{ value: 547, name: "撤單", type: "4%" }];const color = [{ text: "#52ca8d" },{ text: "#06bdf6" },{ text: "#116fee" },{ text: "#6e68fd" },{ text: "#9229fd" },{ text: "#fdac50" }];const newArr = dataList.map((item, index) => {return { ...item, ...color[index] };});let arr = [...newArr];const changeCicle = (item, index) => {let arrIndex = spanIndex.value.indexOf(index);if (arrIndex > -1) {spanIndex.value.splice(arrIndex, 1);arr.splice(index, 0, item);} else {spanIndex.value.push(index);arr = arr.filter(res => {return res.name != item.name;});}//let myChart = echarts.init(wholeCircle.value);//let bar = orderEcharts.wholeCircle(arr);//myChart.setOption(bar);};return {wholeCircle,dataList,isactive,newArr,changeCicle,spanIndex};}

總結(jié)

以上是生活随笔為你收集整理的vue3.0动态循环icon点击变色，再次点击取消选中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。