vue在多个按钮之间切换选中状态

写了一个简易的按钮切换选择需求，具体的样式都可以自由更改

HTML：

<span class="btn-time" @click="selectTime($event)">02:30~03:00</span>
<span class="btn-time" @click="selectTime($event)">03:30~04:00</span>
<span class="btn-time" @click="selectTime($event)">04:30~05:00</span>
<!--此处只为演示，一般都是动态生成这样的结构-->

data:

beforeTarget:{}    //记录上次点击的按钮

methods:

selectTime(e) {
  //给点击选中的按钮添加选中效果
  e.currentTarget.classList.add("show");
  //判断是否重复点击
  if (e.currentTarget !== this.beforeTarget) {
    //判断，若为第一次点击，则不进行修改
    if (Object.keys(this.beforeTarget).length > 0) {
      this.beforeTarget.classList.remove("show");
    }
    //将上次点击的按钮存储
    this.beforeTarget = e.currentTarget;
  }
}

css:

.btn-time{
  font-size:0.2rem;
  border:1px solid #bbb;
  padding:0.1rem 0.3rem;
  border-radius:0.1rem;
 }
.show{
  background-color:skyblue;
}

效果图如下：

效果图