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

Question

我试图在 mouseenter/mouseleave 事件的 v-for 循环中更改单个元素的类，但我对如何实现它感到困惑，以便只有悬停的元素上的类发生变化。

我试过将类绑定(bind)到一个变量，但这显然会导致列表中的所有元素发生变化。

<template>
  <ul>
    <li class="item" v-for="item in items" @mouseenter="showInfoBar()" @mouseleave="hideInfoBar()">
        <span class="infobar" :class="{ show : infoBar }"> </span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ItemsList',
  props: ['items'],
  data()  {
    return {
      infoBar: false
    }
  },
  methods: {
    showInfoBar() {
      this.infoBar = true
    },
    hideInfoBar() {
      this.infoBar = false
    }
  }
}
</script>

Answer 1

你可以用这个代替

<template>
  <ul>
    <li class="item" v-for="(item, index) in items" :key="index" @mouseenter="infoBar = index" @mouseleave="infoBar = null">
        <span class="infobar" :class="{ show : infoBar == index }"> </span>
    </li>
  </ul>
</template>

然后对于您的数据属性，

data()  {
    return {
      infoBar: null
    }
},