Vue 2 - 删除悬停和单击时的类（带有多个元素）

Question

是否可以使用 Vue 从元素中删除类？我需要删除悬停事件上的类，并在指针不在文本上方时将其恢复。

另外，我需要在单击元素时删除类。

这是我尝试运行的一个示例：

<span class="text-muted">All | </span>
<span class="text-muted">Visible | </span>
<span class="text-muted">Hidden</span>

加载页面时，第一个跨度不应具有该类，直到按下另一个元素。

Answer 1

要在单击元素时删除该类，您可以这样做：

<span class="text-muted" @click="$event.target.classList.remove('whatever-class')">All | </span>

要删除悬停时的类，只需将事件名称更改为mouseover：

<span class="text-muted" @mouseover="$event.target.classList.remove('whatever-class')">All | </span>

要添加类回来使用mouseout事件：

<span class="text-muted" @mouseout="$event.target.classList.add('whatever-class')">All | </span>

希望这可以帮助。