在做项目的过程中老师给了我一个需求，就是点击按钮变成红色并让其他按钮变成蓝色。

具体操作是 我需要让它们有一个关联，于是我用了一个for循环，在这里用到的是antd的按钮格式

<a-button
          v-for="(item, index) in btnName"
          :key="index"
          @click="btnChange(index)"
          :class="changeLeftBackground === index ? 'btnRed' : 'btnBlue'"
          >{{ item.name }}</a-button
        > 

  const btnName = [{ name: '最近1小时' }, { name: '最近2小时' }, { name: '最近6小时' }, { name: '最近12小时' }, { name: '最近24小时' }];
  let changeLeftBackground = ref(0);
  // end

  // 配置最近几小时按钮颜色
  function btnChange(index) {
    changeLeftBackground.value = index;
  }

  .btnRed {
    //background: red;
    border-color: red;
    color: red;
    margin: 0px 10px 10px;
    padding: 0px 30px;
  }
  .btnBlue {
    border-color: deepskyblue;
    color: deepskyblue;
    margin: 0px 10px 10px;
    padding: 0px 30px;
  }