Vue 2 - ホバリングとクリック時のクラスを削除する（彫刻要素あり）

Question

Vueで要素からクラスを削除することはできますか？ポインタをテキストの上に置かないと、吹き出しイベントのクラスを削除して戻す必要があります。

また、要素をクリックしたときにクラスを削除する必要があります。

これは私が実行しようとしている例です。ページがロードされると、他の要素が押されるまで

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

、最初スパンは、クラスを持つべきではありません。

Answer 1

要素がクリックされた時、あなたはこのようにそれを行うことができ、クラスを削除するには：ちょうどmouseoverにイベント名を変更し、ホバー上のクラスを削除するには

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

を：

<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> 

希望このヘルプs。