Question

我有四个元素，在悬停时我想改变悬停元素的图标，我知道我可以用JS / jQuery做到这一点，但我是vue的新手，并希望在Vue中做到这一点。现在它使用以下代码更改了所有四个元素图标：

HTML：

<div class="col-md-3">
<div class="welcome-latest">
    <div class="hover-icon animated" v-bind:class="{ latestActive : isActive }">
        <i class="fa fa-play" aria-hidden="true"></i>
    </div>
    <div class="welcome-latest-part"
            v-on:mouseover="latestActive"
            v-on:mouseleave="latestInActive">
        <a href="#">
            <div class="latest-icon">
                <i class="fa fa-play-circle-o" aria-hidden="true"></i>
            </div>
            <hr>
            <div class="latest-title">
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
            </div>
        </a>
    </div>
</div>
</div>

Vue的：

new Vue({
    el: '#app',

    data : {
        isActive : true
    },

    methods : {
        latestActive (part) {
            this.isActive = false;
        },
        latestInActive(part) {
            this.isActive = true;
        }
    }
});

但我只想改变悬停的元素！我该怎么做？谢谢高级。

这是我的fiddle！

Answer 1

基本上你的问题是你正在使用全局状态为这里的所有元素设置类。

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>

然后像这样修改#app：

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

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

1 个答案: