vue实现鼠标移入移出事件代码实例

这篇文章主要介绍了vue实现鼠标移入移出事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文实例为大家分享了vue实现鼠标移入移出事件的具体代码,供大家参考,具体内容如下

<div v-for="(item,index) in table_tit"> <div> <span :title="item.name">{{item.name}}</span> <span> <i @mouseenter="enter(index)" @mouseleave="leave()"></i> <div v-show="seen&&index==current"> <div>{{item.det}}</div> </div> </span> </div> </div>

export default { data(){ return{ seen:false, current:0 } }, methods:{ enter(index){ this.seen = true; this.current = index; }, leave(){ this.seen = false; this.current = null; } } }  

以上所述是小编给大家介绍的vue实现鼠标移入移出事件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/16a23af5fb9b128afacf5039db2d8ba0.html