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

Posted 2021-12-09 JackieDYH

效果图

 主要代码

// 结构
<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;
	  }
	}
  });
}