click事件更换按钮背景 vue

 <button @click="btn(1)" :class="index == 1 ? 'parallelogram1' : 'parallelogram11' "></button>

    <button  @click="btn(2)" :class="index == 2 ? 'parallelogram22' : 'parallelogram2' "></button>

    <button  @click="btn(3)" :class="index == 3 ? 'parallelogram33' : 'parallelogram3' "></button>

js

btn(e) {

      console.log("按钮",e)

      this.index = e;

    }

css

.parallelogram1 {
  width: 100px;
  height: 34px;
  position: relative;
  clip-path: polygon(
    20px 0%,
    0% calc(100% - 8px),
    8px 100%,
    calc(100% - 8px) 100%,
    100% calc(100% - 8px),
    calc(100% - 20px) 0%
  );
  margin-left: 50px;
  margin-top: 20px;
  background-color: rgb(17, 41, 110);
  color: rgb(36, 221, 67);
  border: 1px solid rgb(11, 23, 64);
}
.parallelogram11 {
   width: 100px;
  height: 34px;
  position: relative;
  clip-path: polygon(
    20px 0%,
    0% calc(100% - 8px),
    8px 100%,
    calc(100% - 8px) 100%,
    100% calc(100% - 8px),
    calc(100% - 20px) 0%
  );
  margin-left: 50px;
  margin-top: 20px;
  background-color: rgb(17, 41, 110);
  color: #fff;
  border: 1px solid rgb(11, 23, 64);
}

.parallelogram2 {
  margin-top: 20px;
  width: 100px;
  height: 34px;
  position: relative;
  clip-path: polygon(
    8px 0%,
    0% 8px,
    20px 100%,
    calc(100% - 20px) 100%,
    100% 8px,
    calc(100% - 8px) 0%
  );
  background-color: rgb(17, 41, 110);
  //   color: rgb(36, 221, 67);
  color: #fff;
  border: 1px solid rgb(11, 23, 64);
}
.parallelogram22 {
  margin-top: 20px;
  width: 100px;
  height: 34px;
  position: relative;
  clip-path: polygon(
    8px 0%,
    0% 8px,
    20px 100%,
    calc(100% - 20px) 100%,
    100% 8px,
    calc(100% - 8px) 0%
  );
  background-color: rgb(17, 41, 110);
  //   color: rgb(36, 221, 67);
  color: rgb(36, 221, 67);
  border: 1px solid rgb(11, 23, 64);
}
.parallelogram3 {
  width: 100px;
  height: 34px;
  position: relative;
  clip-path: polygon(
    20px 0%,
    0% calc(100% - 8px),
    8px 100%,
    calc(100% - 8px) 100%,
    100% calc(100% - 8px),
    calc(100% - 20px) 0%
  );
  background-color: rgb(17, 41, 110);
  //   color: rgb(36, 221, 67);
  color: #fff;
  border: 1px solid rgb(11, 23, 64);
  margin-top: 20px;
  // border: 5px solid #e01b25;
}
.parallelogram33 {
  width: 100px;
  height: 34px;
  position: relative;
  clip-path: polygon(
    20px 0%,
    0% calc(100% - 8px),
    8px 100%,
    calc(100% - 8px) 100%,
    100% calc(100% - 8px),
    calc(100% - 20px) 0%
  );
  background-color: rgb(17, 41, 110);
    color: rgb(36, 221, 67);
  // color: #fff;
  border: 1px solid rgb(11, 23, 64);
  margin-top: 20px;
  // border: 5px solid #e01b25;
}