【Vue.js】イベント修飾子 v-once

はじめに

こんにちは！
今回は【Vue.js】イベント修飾子 v-onceについてアウトプットしていきます！

イベント修飾子とは

v-onのために、イベント修飾子を提供している。クリックなどのDOMイベントの振る舞いを変更する修飾子。

v-onceはイベントハンドラを１回だけ実行することができる。

書き方・解説

現在の時刻を表示するプログラムを例題としていきます。
v-onceを使い、2度目以降はボタンを押してもイベントハンドラが実行されないように書きます。

HTML

<div id="app">
  <button v-on:click.once="clickHandler">
                  <!--⏫最初の一回だけ処理を実行する-->
    Now
  </button>
  <p>
    {{ message }}
  </p>
</div>

Vue.js

 var app = new Vue({
   el: "#app",
   data: {
     message: ''
   },
   methods: {
     clickHandler: function() {
       this.message = new Date().toLocaleTimeString()
       　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//⏫現在時刻の表示
     }
   }
 })

clickHandlerメソッドを用意し、中身に処理を書く。内容は、現在の時刻をthis.messageに代入する
とする。するとdataオプションのmessageに現在の時刻が代入された。

＜テンプレート側＞
ボタンを設置。ボタンの中にv-on:click.once="clickHandler"と記述。このように.onceも一緒に記述すると、ボタンがクリックされた時にclickHandlerの処理を１回だけ実行するという処理が行われる。
*２回目クリックしても処理は実行されない。
その処理した内容を{{ message }}で表示させているというプログラムになる。

まとめ

・v-on:click.once="〇〇"というふうな形で記述する。.を忘れない。
・v-onceは１回だけ処理を実行する。

最後に

今回はイベント修飾子 v-onceについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！