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