Vue.jsでマウスオーバー時にメソッドを実行する方法【現役エンジニアが解説】

今回は、Vue.jsでマウスオーバー時にメソッドを実行する方法について、簡単に解説していきます。

HTML

Vue.jsでもマウスオーバー時にメソッドを実行できます。
HTMLではv-on:でmouseenterやmouseleaveを設定するだけです。

<div id="app">
  <div v-on:mouseenter="mouseEnter" v-on:mouseleave="mouseLeave">{{message}}</div>
</div>

上記の例では、マウスオーバー時にmouseEnterメソッドを、マウスオーバー解除時にmouseLeaveメソッドを実行します。

Vue.js

Vue.jsではメソッドを用意するだけです。
マウスオーバー時とマウスオーバー解除時の処理を書きます。