本项目用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值,下面的版本同理
感谢支持!!!