效果图

Vue中按钮组中多个按钮状态控制-同个按钮二次点击取消选中效果-案例_原力计划

主要代码

// 结构
<a
v-for="(item, index) in optWkList"
:key="item.id"
:class="{ active: item.isBtn }"
@click="optBtn(item, index)"
>
{{ item.name }}
</a>

// 数据
optWkBtn: '',//默认
optWkList: [
{
name: 可复刻,
isBtn: false,
id: "2",
},
{
name: 可引用,
isBtn: false,
id: "3",
},
],

逻辑处理

optBtn(val, id) {
this.optWkList.forEach((item, index) => {
item.isBtn = false;
if (index == id) {
if(val.id == this.optWkBtn){
// 第二次点击
this.optWkBtn = '';
item.isBtn = false;
}else{
// 第一次点击
this.optWkBtn = item.id;
item.isBtn = !item.isBtn;
}
}
});
}