Vue 添加事件的方式很方便,在标签元素上以@click=“itemFn” 的形式填加就好,而且还有 .stop 、.prevent 、.self 等修饰符,简单好用。
但是如果li非常多呢?给列表上每个li都添加点击事件是不是不太好?
li 添加click
<template>
<ul>
<li class="li" v-for="(m,i) in 5" :key="i" @click="itemFn(m)">{{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">{{m}}</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
事件委托的坑
//将点击事件添加到UI上,确实减少了事件的注册,但是li里通常还有其他子元素,
//当你实际获取e.target.nodeName 时,也大概率不是li ,因此我一般会将一个子元素定位到li上面
// z-index 调大,且透明
如果还有更好的办法,欢迎评论留言~