0
点赞
收藏
分享

微信扫一扫

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

 


举报

相关推荐

0 条评论