点击事件改变样式

方法一：使用三目运算符改变整体样式

HTML

 <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;
}

 缺点：越多样式需要改变，冗余代码量越大

方法二：通过三目运算符改变单独样式

  <button @click="btn(1)" class="parallelogram1" :style="{color:(index == 1?' rgb(36, 221, 67)':'#fff')}"></button>
    <button  @click="btn(2)" class="parallelogram2" :style="{color:(index == 2?' rgb(36, 221, 67)':'#fff')}"></button>
    <button  @click="btn(3)" class="parallelogram3" :style="{color:(index == 3?' rgb(36, 221, 67)':'#fff')}"></button>

 代码冗余少

方法三：通过DOM节点改变样式

  <button @click="btn(1)" class="parallelogram1" ref="btnInfo1">
      报警信息
    </button>
    <button @click="btn(2)" class="parallelogram2" ref="btnInfo2">
      离线设备
    </button>
    <button @click="btn(3)" class="parallelogram3" ref="btnInfo3">
      报警设备
    </button>

    btn(e) {
      console.log("按钮", e);
      // this.index = e;
      var btn1 = this.$refs.btnInfo1;
      var btn2 = this.$refs.btnInfo2;
      var btn3 = this.$refs.btnInfo3;
      if (e == 1) {
        btn1.style.color = "rgb(36, 221, 67)";
        btn2.style.color = "#fff";
        btn3.style.color = "#fff";
      } else if (e == 2) {
        btn2.style.color = "rgb(36, 221, 67)";
        btn1.style.color = "#fff";
        btn3.style.color = "#fff";
      } else {
        btn3.style.color = "rgb(36, 221, 67)";
        btn2.style.color = "#fff";
        btn1.style.color = "#fff";
      }
    },