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);
    }
Logo

前往低代码交流专区

更多推荐