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

沐晨
  • 37

我这样写,然后鼠标进过所有的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})
          }
回复
阅读 3.8k
4 个回答
✓ 已被采纳

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

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

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

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

宣传栏