标签切换高亮的排他方法

本项目用Vue搭建

完整的标签html代码

<dl v-for="attr in spuSaleAttrList">
    <dt class="title">{{attr.saleAttrName}}</dt>
    <dd changepirce="0" :class="{active:attrValue.isChecked==1}"
        v-for="attrValue in attr.spuSaleAttrValueList"
        @click="changeActive(attrValue,attr.spuSaleAttrValueList)"
        >
        {{attrValue.saleAttrValueName}}</dd>
</dl>

attr.spuSaleAttrValueList数组：

上面的attrValue参数表示spuSaleAttrValueList数组的单个元素， attr.spuSaleAttrValueList参数表示spuSaleAttrValueList遍历的每个元素

排他法

methods:{
    //点击 切换产品的售卖属性高亮
    changeActive(saleAttrValue,arr){
        // saleAttrValue为数组循环遍历的每个属性值，arr为循环遍历的数组
        // 遍历全部售卖属性值，取消高亮（选择），设置isChecked为0
        arr.forEach(item => {
            item.isChecked = 0;
        });
        // 点击那个售卖属性 给予高亮，设置isChecked为1
        saleAttrValue.isChecked = 1;
    }
}

效果图：

解释：用户在点击颜色明月灰时，调用changeActive函数，数组遍历将冰雾白和明月灰的isChecked赋予0值，随后给明白灰的isChecked赋予1值，下面的版本同理

感谢支持！！！