uniapp中当li悬停的时候怎么获得它的下标
可以通过以下步骤获得li的下标:
- 给每个li绑定一个唯一的id或者索引值,例如:
<template>
<ul>
<li v-for="(item, index) in list" :key="item.id" :id="'item_' + index">{{ item.name }}</li>
</ul>
</template>
- 监听li的鼠标悬停事件,使用事件对象获取当前鼠标悬停的li的id或者索引值,例如:
<template>
<ul>
<li v-for="(item, index) in list" :key="item.id" :id="'item_' + index" @mouseover="handleMouseover">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'item1' },
{ id: 2, name: 'item2' },
{ id: 3, name: 'item3' }
]
}
},
methods: {
handleMouseover(event) {
const id = event.currentTarget.id; // 获取当前li的id
const index = Number(id.split('_')[1]); // 解析出当前li的索引值
console.log(index);
}
}
}
</script>
原文地址: https://www.cveoy.top/t/topic/uQO 著作权归作者所有。请勿转载和采集!