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

PROGRAM

今回は、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ではメソッドを用意するだけです。

マウスオーバー時とマウスオーバー解除時の処理を書きます。

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      message: 'デフォルトメッセージ'
    }
  },
  methods: {
    mouseEnter: function() {
      this.message = 'ホバー';
    },
    mouseLeave: function() {
      this.message = 'ホバー解除';
    }
  }
});

上記のコードでは、マウスオーバー時とマウスオーバー解除時でmessageプロパティの文字列を書き換えています。

mouseover・mouseoutとの違い

mouseoverとmouseoutというイベントもあります。

mouseenterとmouseleaveでは子要素間との移動による発火はありません。

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

上記のコードでは、子要素間との移動でも発火させる場合のHTMLの書き方となります。