技術標籤：vuedemovuejavascript

寫了一個簡易的按鈕切換選擇需求，具體的樣式都可以自由更改

HTML：

<span class="btn-time" @click="selectTime($event)">02:30~03:00</span>
<!--class可以更改，但是後面的方法內的className部分也要跟著修改-->

data:

beforeTarget:{}    //記錄上次點選的按鈕

methods:

selectTime(e) {

  //給點選選中的按鈕新增選中效果
  e.currentTarget.classList.add('show')

  //判斷，若為第一次點選，則不進行修改
  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
}

效果圖如下：