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都一样，尝试区分一下应该就好了