一直都是写原生js的事件委托,没有在vue中使用过事件委托
写这篇文章记录一下
//<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<ul @click="getItem">
//如果直接给li点击事件,不利于性能
// 需要自定义属性
<li v-for="item in list" :key="item.id" :data-id="item.id">{{item.name}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
list:[
{id:0,name:'000'},
{id:1,name:'111'},
{id:2,name:'222'},
{id:3,name:'333'},
{id:4,name:'444'},
{id:5,name:'555'},
]
},
methods: {
getItem(e){
let tag = e.target;
let id = tag.getAttribute('data-id') //这是重点
alert(this.list[id].name)
}
}
})
</script>