javascript - Vue 2 - 在悬停和单击时删除类(带有多个元素)

Question

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

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

这是我尝试运行的示例:

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

当页面加载时，第一个 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>

希望这对您有所帮助。