给 v-for 遍历出来的div怎么加点击事件怎么判断点击的是哪一个
时间: 2023-05-16 15:02:48 浏览: 70
在使用 v-for 遍历出来多个 div 的情况下,可以在 div 上添加 v-on:click 事件监听器,同时定义一个方法来处理点击事件,如下所示:
```
<div v-for="(item, index) in items" v-bind:key="index" v-on:click="handleClick(index)">
{{ item }}
</div>
```
其中,items 是一个数组,通过 v-for 遍历出所有元素,index 是当前遍历的元素的索引值。
在定义的方法 handleClick 中,可以通过传入的 index 参数来判断点击的是哪一个 div,如下所示:
```
methods: {
handleClick(index) {
console.log('You clicked on item ' + index)
}
}
```
通过 console.log 输出点击的是哪一个元素。
另外,当 div 内部有多个子元素时,如果仅在 div 上添加 v-on:click 事件监听器,那么在点击子元素时,也会触发 div 的点击事件。为了避免这种情况,可以在子元素上添加 v-on:click.stop 指令,阻止事件冒泡,如下所示:
```
<div v-for="(item, index) in items" v-bind:key="index" v-on:click="handleClick(index)">
<p v-on:click.stop>{{ item }}</p>
</div>
```
这样,在点击子元素时,只会触发子元素的点击事件,而不会触发父元素的点击事件。