Vue-点击按钮,当前按钮显示对应的type样式,而其他元素移除样式

 默认第一个按钮自带primary属性颜色,点击其中一个按钮,切换到primary类型,而其他按钮取消该类型的样式

******** html *********
<ul class="btns">
    <li v-for="(item, index) in list" :key="item.id">
        <el-button size="small" @click="changeBg(item, index)" :type="item.btnType">{{ item.name }} {{ item.count }}</el-button>
    </li>
</ul>
*********** js **************
list: [
       { id: 1, name: "全部证件", count: 38540, btnType: this.btnType },
       { id: 2, name: "手写识别", count: 540, btnType: this.btnType },
       { id: 3, name: "语音文字提取", count: 40, btnType: this.btnType },
],
btnType: '',



changeBg(ele, idx) { 
    this.list.forEach(item => {
        item.btnType = "";     // 排他
        if ((ele.id ==item.id)) {  // 通过id进行对比,而不是通过索引值进行对比
          this.list[idx].btnType = "primary";  // 修改数组中指定对象里的btnType
        }
    });
},
********* css ********
ul {
    list-style: none;
    width: 100%;
    margin-bottom: 15px;
    padding: 5px 0;
    display: flex;

    li {
      margin: 0 5px 5px 0;
    }
 }

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值