vue3.0动态循环icon点击变色，再次点击取消选中

先看效果图

点击后发生改变

开始上代码
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部分关键代码
关于ref这个响应式引用可以看官网带 ref 的响应式变量

import { ref } from "vue"; //需要引入ref相应变量setup() {const wholeCircle = ref(null);const isactive = ref(0); //选中切换的名字const spanIndex = ref([]); //选中icon的数组const dataList = [{ value: 758, name: "付款", type: "30%" },{ value: 425, name: "接单", type: "20%" },{ value: 565, name: "发货", 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};}

总结

以上是生活随笔为你收集整理的vue3.0动态循环icon点击变色，再次点击取消选中的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。