Vueを使っている際に、たくさんの関数を定義することになると思いますが、vueオブジェクトにまとめて定義することで管理が楽になったり、コード全体の可読性が高くなったりします。また、methodsに用意された関数はイベントに対するハンドラとしてv-onディレクティブによって簡単に発火させることができます。v-onディレクティブについて詳しく知りたい方は「Vueのv-onディレクティブの書き方・使い方について解説」を参照してみてください！

Vueのmethodsプロパティとは？

アプリケーションを作る中で必要となる様々な関数を一括して管理できるのがmethodsプロパティです。methodsプロパティ内に記述された関数はイベントに対するハンドラや、他の関数内でも呼び出すことができます。

Vueのmethodsプロパティの使い方

それでは実際のmethodsの書き方について説明していきます。

Vueのmethodsプロパティの書き方

Vueのmethodsプロパティは次のように書きます。

methods:{
  関数名:function(){
    実行する処理
}}

もちろん関数は複数methodsプロパティ内で定義することができます。この際にアロー関数で定義することは推奨されていません。

mehotdsプロパティの実装例

入力された数字が奇数か偶数かを判定する関数をmethodsプロパティ内で定義してみましょう。

(index.html)

<div id="app">
     <input type="number" v-model ="count">
     <button v-on:click ="judge()">奇数か偶数か判定</button>
     <div>{{ resutl }}</div>
</div>
<script>
var app = new Vue({
   el:'#app',
   data:{
      count:0,      resutl:’’,
   },
   methods:{
    judge:function(){
     if(this.count % 2 == 0){
       this.resutl = '偶数です'
     }else{
       this.resutl = '奇数です'  
    },
   },
})
</script>

２で割ったあまりが０となる数字は偶数となるので、methodsプロパティ内で入力された値が２で割ると０となる場合は「偶数です」と表示し、奇数の場合は「奇数です」と表示する関数judge()を定義します。少し長い処理となるので、methodsプロパティ内で定義すると管理しやすく便利です。また、ボタン要素にv-on:clickでjudge関数を指定することで、簡単に処理を実行させることができます。v-modelディレクティブは入力された値を指定したデータの値に格納するディレクティブです。v-modelディレクティブについては「Vueのv-modelディレクティブの書き方・使い方について解説」も参照してみてください！

この記事のまとめ

本記事ではVueのmethodsプロパティを、実際の実装例を元に説明しました！最後に記事の要点をまとめてみましょう。

• methodsプロパティ内に関数を書くことでハンドラ関数などの関数として利用できる。

Vueのmethodsプロパティを是非活用してみましょう！