鼠标悬浮到某个 ＜li＞ 元素时，将 hoverLiData 更新为当前 item 的 id

在 Vue 3 的 <script setup> 语法中，使用 ref 来创建响应式数据，并使用事件处理函数来更新这些数据。

<template>
  <ul>
    <li
      v-for="item in hexinData"
      :key="item.id"
      @mouseover="updateHoverData(item.id)"
    >
      {{ item.text }}
    </li>
  </ul>
  <p>Hovered Item ID: {{ hoverLiData }}</p>
</template>

<script setup>
import { ref } from 'vue';

// 假设 hexinData 是从某处获取的数据
const hexinData = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
  // ... 其他数据
]);

const hoverLiData = ref('0');

// 更新悬浮的 item 的 ID
function updateHoverData(id) {
  hoverLiData.value = id;
}
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>

解释

1. 模板部分 (<template>):
   • 使用 v-for 指令遍历 hexinData 数组，并为每个 item 创建一个 <li> 元素。
   • 使用 :key 绑定每个 <li> 的唯一标识符（item.id）。
   • 使用 @mouseover 事件监听器，当鼠标悬浮到 <li> 上时，调用 updateHoverData 函数，并传递当前 item 的 id。
2. 脚本部分 (<script setup>):
   • 使用 ref 创建响应式数据 hexinData 和 hoverLiData。
   • hexinData 初始化为一个包含多个对象的数组，每个对象有 id 和 text 属性。
   • hoverLiData 初始化为 '0'（或任何初始值，这里只是为了演示）。
   • 定义 updateHoverData 函数，该函数接受一个 id 参数，并更新 hoverLiData 的值。
3. 样式部分 (<style scoped>):
   • 可以在这里添加任何需要的样式。scoped 关键字意味着这些样式只会应用于当前组件。