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')
}