vue 点击背景色变色，

<template>
  <md-page class="zujianlb">
    <div class="header">
      <div class="wrap">
        <span style="float: left">分类</span>
        <div class="total1" v-for="(item, index) in fenLei" :key="index" style="float: left">
          <!-- <span>  </span> -->
          <md-button

          @click="onFenLei(item)"
          :class="{ select1: true, active1: item.id === fenLeiSel }"
           round>{{ item.mingCheng }}</md-button>
        </div>
      </div>
      <div style="clear: both"></div>
      <div class="wrap">
        <span style="float: left">标签</span>
        <div class="total" v-for="(item, index) in biaoQian" :key="index" style="float: left">
          <!-- <span>  </span> -->
          <md-button
          class="biaoqian"
            @click="onBiaoQian(item)"
            round
            :class="{ select: true, active: item.id === sel }"
            >{{ item.mingCheng }}</md-button
          >
        </div>
      </div>
    </div>
  </md-page>
</template>

<script>
export default {
  name: 'zuJianLB',
  props: {},
  data() {
    return {
      sel: 1,
      fenLeiSel:0,
  
  
      fenLei: [
        {
          id: 0,
          mingCheng: '全部',
        },
        {
          id: 1,
          mingCheng: 'AI组件',
        },
        {
          id: 2,
          mingCheng: '功能组件',
        },
        {
          id: 3,
          mingCheng: '单体组件',
        },
      ],
      biaoQian: [
        {
          id: 1,
          mingCheng: '全部',
        },
        {
          id: '11',
          mingCheng: 'AI',
        },
        {
          id: '12',
          mingCheng: 'Java',
        },
        {
          id: '13',
          mingCheng: 'Vue',
        },
      ],
    }
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 分类
    onFenLei(item){
       console.log(item, 'onFenLei')
       this.fenLeiSel = item.id
    },
    //标签
    onBiaoQian(item) {
      console.log(item, 'onBiaoQian')
      this.sel = item.id
    },
  },
  components: {},
}
</script>

<style scoped lang="scss">


.biaoqian{
  min-width: 50px;
}
.total {
  margin-left: 10px;
  border-radius: 100px;
  background: #f4faff;
  // border: 1px solid rgba(76, 143, 255, 1);
  color: #4c8fff;
  text-align: center;

}
.select.active {
  background: #4c8fff;
  color: #ffffff;
}
.select1.active1{
   background: #4c8fff;
  color: #ffffff;
}
.zujianlb .total1 .md-button{
border: 1px solid #fafafa;
}
</style>