vue中点击按钮变色，选中按钮后字体变色效果实现

类似下图中的一个效果默认按钮为全部，点击其他按钮时候按钮变成绿色并且文字变成白色html模板<div class="typeBox"><spanclass="type_item"v-for="(item, index) in typeList":key="index":class="current_type === index ? 'typeActi

铁锤妹妹@

8789人浏览 · 2021-04-29 11:54:02

铁锤妹妹@ · 2021-04-29 11:54:02 发布

类似下图中的一个效果
默认按钮为全部，点击其他按钮时候按钮变成绿色并且文字变成白色
在这里插入图片描述
html模板

    <div class="typeBox">
          <span
            class="type_item"
            v-for="(item, index) in typeList"
            :key="index"
            :class="current_type === index ? 'typeActive' : ''"
            @click="checkoutType(index)"
          >
            {{ item.title }}
          </span>
        </div>

data初始化数据

data() {
    return {
      typeList: [
        { title: "全部" },
        { title: "充值" },
        { title: "提现" },
        { title: "积分" }
      ],
      current_type: 0,
    };
  },

css样式

.typeBox {
  display: flex;
  flex-wrap: wrap;
  padding: 9px;
  box-sizing: border-box;
}
.type_item {
  width: calc(calc(100% - 30px) / 3);
  height: 50px;
  background: #fff;
  color: #333;
  font-size: 13px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
.typeActive {
  background: #19a423;
  color: #fff;
}

上面这段代码的意思是

current_type：0；当前标签和数组循环的索引一样的时候，添加 typeActive 的样式，否则不添加
再设置一个点击事件，当点击的时候获取点击按钮的索引，然后在方法里定义 this.current_type = index;

 checkoutType(index) {
      console.log(index);
      this.current_type = index;
      this.typePopup = false;
      this.type_txt = this.typeList[index].title;
    }