vue 列表 鼠标滑过悬浮 样式改变

在Vue中，可以使用事件绑定来改变鼠标滑过列表项时的样式。以下是一个简单的例子：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" @mouseenter="changeStyle(index)" @mouseleave="resetStyle">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      hoverIndex: null
    };
  },
  methods: {
    changeStyle(index) {
      this.hoverIndex = index;
    },
    resetStyle() {
      this.hoverIndex = null;
    }
  }
};
</script>
 
<style>
.hover-style {
  background-color: #f0f0f0; /* 悬浮时的背景色 */
}
</style>

在这个例子中，mouseenter 事件绑定了 changeStyle 方法，它会更新 hoverIndex 的值为当前项的索引。mouseleave 事件绑定了 resetStyle 方法，它会将 hoverIndex 重置为 null。然后在列表项使用 v-bind:class 来根据 hoverIndex 的值来动态绑定样式类 .hover-style。当鼠标滑过列表项时，该项将应用悬浮样式。