Vue的hover事件

最新推荐文章于 2025-03-08 10:45:42 发布

qq_41850239

最新推荐文章于 2025-03-08 10:45:42 发布

阅读量3w

点赞数 4

分类专栏： Vue 文章标签： Hover事件

本文链接：https://blog.youkuaiyun.com/qq_41850239/article/details/90450808

版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

Vue的hover事件

因为Vue刚开始使用不久，所以对于Vue的知识点都不知道，因此在这记录一下。
需求：对于所遍历的数据都加上一个hover事件，当鼠标放在某条数据上时，做一些操作，当鼠标移开时，停止这些操作。
这里的难点就在于只有鼠标所放的数据才触发事件，别的数据不触发事件。不说了，放实例代码，只贴出了核心代码。

<Cell v-for='(d,index ) of datas' :xs='12' :sm='8' :md='8' :lg='8' :xl='8' :key="index">
              <div :height="contentHeight" @mouseenter="mouseover(d)" @mouseleave="mouseLeave(d)" >
              
 mouseover(d){//移进显示
      let _this=this;
      this.$nextTick(function () {
          this.datas.forEach(function (d) {
            _this.$set(d,'show',false);
          });
          this.$set(d,'show',true);
        });  
    },
    mouseLeave(d){//移出不显示
       this.$set(d,'show',false);
    }