uniapp中当鼠标悬停的时候获得li的下标
在uniapp中,可以通过以下步骤获得鼠标悬停的li下标:
- 在li标签中添加一个自定义属性,用于标记li的下标:
<template>
<ul>
<li v-for="(item, index) in list"
:key="index"
:data-index="index"
@mouseover="handleMouseOver">{{ item }}</li>
</ul>
</template>
这里使用了data-index属性来标记li的下标,并在mouseover事件中调用handleMouseOver方法。
- 在methods中添加handleMouseOver方法:
methods: {
handleMouseOver(event) {
const index = event.target.dataset.index;
console.log('hover item index:', index);
}
}
这里通过event.target.dataset.index获取li的下标,并输出到控制台中。
这样,当鼠标悬停在li上时,就可以通过handleMouseOver方法获取li的下标了。
原文地址: https://www.cveoy.top/t/topic/w5N 著作权归作者所有。请勿转载和采集!