uniapp li 悬停获取下标方法

<template>
  <ul>
    <li v-for='(item, index) in list' :key='index' :id=''li-' + index' @mouseover='handleHover'>{{ item }}</li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    handleHover(e) {
      const li = e.target;
      const index = li.id.split('-')[1];
      console.log('当前li的下标是：', index);
    }
  }
}
</script>
<p>在 uniapp 中，可以通过以下步骤获取 li 的下标：</p>
<ol>
<li>
<p>在 li 标签中添加一个唯一的标识符，比如 id 或者 data-id，并将其值设置为当前 li 的下标。</p>
</li>
<li>
<p>在 li 的 hover 事件中，通过 e.target 获取当前的 li 元素。</p>
</li>
<li>
<p>通过 li 元素的标识符获取其下标值。</p>
</li>
</ol>
<p><strong>示例代码如下：</strong></p>
<pre><code>&lt;template&gt;
  &lt;ul&gt;
    &lt;li v-for='(item, index) in list' :key='index' :id=''li-' + index' @mouseover='handleHover'&gt;{{ item }}&lt;/li&gt;
  &lt;/ul&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    handleHover(e) {
      const li = e.target;
      const index = li.id.split('-')[1];
      console.log('当前li的下标是：', index);
    }
  }
}
&lt;/script&gt;
</code></pre>