Vue中事件委托的使用

事件委托即是把點擊事件委托給父節點，從而解決監聽器過多的問題。

Vue中使用示例如下：

<center class="range" @click="selectTimeRange">
  <span data-value="0" class="selected">全部</span>
  <span data-value="1">近半年</span>
  <span data-value="2">近一個月</span>
  <span data-value="3">近一周</span>
</center>

在父元素使用事件委托綁定selectTimeRange函數，在函數里使用e.target獲取點擊的對象。

selectTimeRange(e) {
  let value = e.target.getAttribute('data-value')
  console.log(value)
  let eles = document.querySelectorAll('.range span')
  let ele = eles[value]
  for(let item of eles){
    item.classList.remove('selected')
  }
  ele.classList.add('selected')
}