可以通过以下步骤获得li的下标:

  1. 给每个li绑定一个唯一的id或者索引值,例如:
<template>
  <ul>
    <li v-for="(item, index) in list" :key="item.id" :id="'item_' + index">{{ item.name }}</li>
  </ul>
</template>
  1. 监听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>
uniapp中当li悬停的时候怎么获得它的下标

原文地址: https://www.cveoy.top/t/topic/uQO 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录