vue事件委托

315 阅读1分钟

一直都是写原生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>