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