概述
效果图
主要代码
// 结构
<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;
}
}
});
}最后
以上就是老迟到月饼为你收集整理的Vue中按钮组中多个按钮状态控制-同个按钮二次点击取消选中效果-案例效果图的全部内容，希望文章能够帮你解决Vue中按钮组中多个按钮状态控制-同个按钮二次点击取消选中效果-案例效果图所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复