vue.js - 如何将鼠标悬停/悬停在 Vue 列表中的一个项目上？

Question

我有这个 vue，它使用 v-for 呈现水果列表。当我鼠标悬停时，css 类 hovering 适用于所有项目，而不是仅适用于一个项目。如何将其修复到 css 类 hovering 以仅应用于我鼠标悬停的项目？

new Vue({
  el: '#app',
  data: {
    fruits: ['apple','kiwi', 'orange'],
    isHovering: false
  }
})

.hovering{
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="fruit in fruits" @mouseover="isHovering = true" 
      @mouseout="isHovering = false" 
      :class="{hovering: isHovering}">
     {{ fruit }}
    </li>
  </ul>  
</div>

Answer 1

删除“:class="{hovering: isHovering}"”并使用常见的 CSS 伪类“:hover”，如下所示:

<template>
<div id="app">
    <ul>
      <li v-for="fruit in fruits" class="hover" :key="fruit" @mouseover="isHovering = true" 
        @mouseout="isHovering = false" >
      {{ fruit }}
      </li>
    </ul> 
  </div>
</template>

new Vue({
  el: '#app',
  data: {
    fruits: ['apple','kiwi', 'orange'],
    isHovering: false
  }
})

<style>
.hover:hover{
  color: red
}

</style>