Javascript 为每个项目添加类

我需要一些帮助，我是vue.js的新手。我有以下几点

<ul>
  <li class="disable"><a href="#">Item 1</a></li>
  <li class="active"><a href="#">Item 2</a></li> //Currently doing mouseover
  <li class="disable"><a href="#">Item 3</a></li>
</ul>

//当前正在进行鼠标悬停

如何在一个项目中执行

mouseover

，并向其他项目添加“活动”类和“禁用”类

---

“基本上，我想要的是，当我将鼠标移到任何项目上时，“活动”类有一个更“禁用”的类，在执行鼠标移出时，只需删除“禁用”类，但保持类“活动”

假设一个类最初是活动的

在

禁用

和

活动

类之间切换，而不使用css

：悬停

 setLiActive(event){
    event.target.classList.remove('disable');
    event.target.classList.add('active');
 },
 setLiDisable(event){
    event.target.classList.remove('active');
    event.target.classList.add('disable');
 }

使用

mouseover

（添加活动类）和

mouseleave

（添加禁用类）

。激活a{
颜色：红色
}
.禁用{
指针事件：无；
游标：默认值；
颜色：灰色；
}

您知道如何使用Vue附加事件侦听器，以及如何处理元素类吗？您是否考虑过从CSS:e

：hover

？如果其中一个默认具有“活动”类，会发生什么情况？我也会很好地工作。不管怎样，我在默认情况下添加了一个活动类。基本上我想要的是，当我将鼠标移到任何项目上时，“活动”类有一个更“禁用”的类，而在执行mouseout时，只需删除“禁用”类，但保持该类“活动”：）您的问题说明了一些不同的内容

在mouseover上添加活动类

&在mouseout上添加

禁用类

<ul>
  <li class="disable" @mouseleave="setLiDisable($event)"  @mouseover="setLiActive($event)" ><a href="#">Item 1</a></li>
  <li class="disable" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)"><a href="#">Item 2</a></li> 
  <li class="disable"  @mouseleave="setLiDisable($event)"  @mouseover="setLiActive($event)"><a href="#">Item 3</a></li>
</ul>