vuejs如何实现鼠标划上去添加效果离开去掉效果?

1、首先打开编辑器，本文使用webstorm

4、接着我们使用vue的属性绑定，为class进行一个条件绑定，格式为:class={类名:条件表达式}。如图中红色框所示，我们定义了一个变量itemHoverIndex，当itemHoverIndex为0时，第一个div会增加itemHover这个类，从而为它增加了悬停效果，当itemHoverIndex为1时，就为第二个div增加效果。

6、最后在导航栏子项上绑定鼠标进入事件和鼠标移出事件，从而实现了鼠标划上去添加效果,离开时去掉效果。