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;
    }
  }
  });
}