vue使用v-for循环时怎样只获取到当前鼠标经过的元素去处理？

Question

我这样写，然后鼠标进过所有的li标签都改变了

        
        <ul class="clearfix">
          <li class="pull-left"
              v-for="(item,index) in homeTag"
              v-bind:key="index"
              @click="goNextPage(item.path)"
              ref="hover"
              @mouseenter="enter"
              @mouseleave="leave">
            <div class="tag-title">{{item.title}}</div>
            <ul>
              <li>{{item.introduce1}}</li>
              <li>{{item.introduce2}}</li>
              <li>{{item.introduce3}}</li>
            </ul>
            <a href="javascript:;" >去了解</a>
          </li>
          <li class="pull-left">
            <a href="javascript:;">更多产品</a>
          </li>
        </ul>

methods :

        
         enter () {
            Velocity(this.$refs.hover, {width: 350}, {duration: 500})
          },
          leave () {
            Velocity(this.$refs.hover, {width: 275}, {duration: 500})
          }

Answer 1

根据v-for的 index 去判断当前是哪条

Answer 2

你所有的li的ref都是相同的啊
原生事件都有一个默认的 $event参数，而通过$event.target可以拿到触发事件的元素

Answer 3

ref="hover"，this.$refs.hover你所有的ref都一样，尝试区分一下应该就好了

Answer 4

我提供下思路：你v-for循环的时候，是不是可以循环出index(键)，你叫后台在返回给你的数据里面给你个id, 再<:class="{class:index == id}"> 绑定属性 ，就是这个思路