【VUE】点击哪个按钮哪个高亮

页面进来后默认第一个高亮显示

点击某个按钮后那个就高亮显示，其他的置灰

html

<div class="dateSelect">
          <button
            :class="['dateBtn', { active: btnActived == 1 }]"
            @click="shoppingDateBtn(1)"
          >
            按钮1
          button>
          <button
            :class="['dateBtn', { active: btnActived == 2 }]"
            @click="shoppingDateBtn(2)"
          >
            按钮2
          button>
          <button
            :class="['dateBtn', { active: btnActived == 3 }]"
            @click="shoppingDateBtn(3)"
          >
            按钮3
          button>
          <button
            :class="['dateBtn', { active: btnActived == 4 }]"
            @click="shoppingDateBtn(4)"
          >
            按钮4
          button>
          <button
            :class="['dateBtn', { active: btnActived == 5 }]"
            @click="shoppingDateBtn(5)"
          >
            按钮5
          button>
          <button
            :class="['dateBtn', { active: btnActived == 6 }]"
            @click="shoppingDateBtn(6)"
          >
            按钮6
          button>
          <button
            :class="['dateBtn', { active: btnActived == 7 }]"
            @click="shoppingDateBtn(7)"
          >
            按钮7
          button>
        div>

 data里设置默认第一个高亮

  data() {
    return {
      btnActived: 1, //默认按钮
}
}

js-点击事件

methods:(){    
    shoppingDateBtn(value) {
      this.btnActived = value;
      if (value == 7) {
        return;//按钮7 为全选
      }
      this.getData();//调用接口
    },
}