Javascript 悬停时在vue框架中更改多个元素图标

我有四个元素，在hover上我想更改悬停元素的图标，我知道我可以用JS/jQuery来做，但我对vue是新手，我想用vue来做。现在，它用以下代码更改了所有四个元素图标：

HTML:

但我只想更改悬停的元素！我将如何做到这一点？ 提前感谢

这是我的

---

本质上，您的问题是您正在使用全局状态为此处的所有元素设置类

v-bind:class="{ latestActive : isActive }"

解决这个问题的一种方法是将列转换为组件。这样，他们每个人都有自己的国家

Vue.component("component",{
  props:["text"],
  template:"#component",
  data(){
    return {
        isActive:true
    }
  }
})

<template id="component">
  <div class="welcome-latest">
    <div class="hover-icon animated" :class="{ latestActive : isActive }">
      <i class="fa fa-play" aria-hidden="true"></i>
    </div>
    <div class="welcome-latest-part"
         v-on:mouseover="isActive=true"
         v-on:mouseleave="isActive=false">
      <a href="#">
        <div class="latest-icon">

        </div>
        <hr>
        <div class="latest-title">
          <h2>{{text}}</h2>
        </div>
      </a>
    </div>
  </div>
</template>

---

您正在使用哪个版本的Vue当前版本：Vue 2！你能把你的代码放在JSFIDLE或类似的平台上吗？这样我就可以看到第一手的答案了。这是我的提琴：如果你不想制作一个全新的组件，你也可以使用

v-for

属性：@thanksd同意，这是另一种有效的方法。他只需要处理文本。谢谢大家，我认为在这种情况下jQuery会更好，不是吗？@Mohib老实说，你可以用CSS中的直接向上：悬停选择器做你想做的事情。实际上，我想使用animate.css和hover/click！我可以只用CSS吗？

v-bind:class="{ latestActive : isActive }"

Vue.component("component",{
  props:["text"],
  template:"#component",
  data(){
    return {
        isActive:true
    }
  }
})

<template id="component">
  <div class="welcome-latest">
    <div class="hover-icon animated" :class="{ latestActive : isActive }">
      <i class="fa fa-play" aria-hidden="true"></i>
    </div>
    <div class="welcome-latest-part"
         v-on:mouseover="isActive=true"
         v-on:mouseleave="isActive=false">
      <a href="#">
        <div class="latest-icon">

        </div>
        <hr>
        <div class="latest-title">
          <h2>{{text}}</h2>
        </div>
      </a>
    </div>
  </div>
</template>

<div class="col-md-3">
    <component text="Lorem ipsum dolor sit amet, consectetur adipisicing elit"></component>
</div>