在Vue.js的v-for循环中更改mouseenter/mouseleave事件上的元素类

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', isHovered: false },
      { id: 2, name: 'Item 2', isHovered: false },
      { id: 3, name: 'Item 3', isHovered: false }
    ]
  };
},
methods: {
  handleMouseEnter(item) {
    item.isHovered = true;
  },
  handleMouseLeave(item) {
    item.isHovered = false;
  }
}

<template>
  <div>
    <div v-for="item in items" :key="item.id"
         @mouseenter="handleMouseEnter(item)"
         @mouseleave="handleMouseLeave(item)"
         :class="{ 'hovered': item.isHovered }">
      {{ item.name }}
    </div>
  </div>
</template>

.hovered {
  background-color: yellow;
}