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