vue 事件委托

Vue 添加事件的方式很方便，在标签元素上以@click=“fnName” 的形式填加就好，而且还有 .stop 、.prevent 、.self 等修饰符，简单好用。

但是如果li非常多呢？给列表上每个li都添加点击事件是不是不太好？

li 添加click

<template>
	<ul>
      <li class="li" v-for="(m,i) in 5" :key="i" @click="itemFn(m)"></li>
    </ul>
</template>

<script>
	export default {
		methods:{
			itemFn (res) {
				//点击每个li,打印 1 、2 、3 、4、5
				//这样写当然也没错
				console.log(res) 	}
			}
		}
	}
</script>

事件委托 ul 添加click

<template>
	<ul @click="clickUlFn">
      <li class="li" v-for="(m,i) in 5" :key="i" :data-index="i"></li>
    </ul>
</template>

<script>
	export default {
		methods:{
			clickUlFn (e) {
				if(e.target.nodeName =='LI'){
					//0、1、2、3、4  下标
					console.log(e.target.dataset.index) 
				}
			}
		}
	}
</script>

注意 nodeName

需要注意比对一下nodeName，是否点击的是 li