脚本宝典收集整理的这篇文章主要介绍了Vue列表 — 事件委托，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
作为疯狂的操纵dom转到vue这样通过数据驱动的程序员来说，姿势的转换也自然产生了很多疑问。
比如，事件委托。
包括我看现在公司的前端代码，发现所有列表的绑定形式都是：
<ul>
<li v-for="(item, index) in data" @click="handleClick(index)">
Click Me
</li>
</ul>然后这样的话，结果就是所有的li元素都绑定了事件。
比如下图就是一个失败案例
我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。
直接上代码：
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="./vue.js"></script>
<script>
let component = {
template: `
<ul @click="handleClick">
<li v-for="(item, index) in data" :data-index="index">
{{ item.text }}
</li>
</ul>
`,
data() {
return {
data: [
{
id: 0,
text: '0',
},
{
id: 1,
text: '1',
},
{
id: 2,
text: '2',
}
]
}
},
methods: {
handleClick(e) {
// 多谢 `@微醺岁月` 提醒，要过滤掉ul，不然会出问题
if (e.target.nodeName.toLowerCase() === 'li') {
const index = parseInt(e.target.dataset.index)
// 获得引索后，只需要修改data数据就能改变UI了
this.doSomething(index)
}
},
doSomething(index) {
// do what you want
alert(index)
}
}
}
new Vue({
el: '#app',
components: {
'my-component': component
}
})
</script>
</body>通过在li元素中额外加一个data-index就可以实现委托啦~
最后，让我们再看一下结果：
以上是脚本宝典为你收集整理的Vue列表 — 事件委托全部内容，希望文章能够帮你解决Vue列表 — 事件委托所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。