【Vue.js】修飾子の種類

#はじめに
こんにちは！
今回は【Vue.js】修飾子の種類についてアウトプットしていきます！

#修飾子とは
@clickなどのイベントに付くドット(.) でつなげた修飾子。プラスで何か機能をつけたいときに使うイメージ。

#書き方・解説

##.lazy
.lazyはバインドのタイミングを遅延させることができる。

HTML

  <input type="text" v-model.lazy="message">
  <p>
  {{ message }}
  </p>

Vue.js

   data: {
     message: ''
   }

上記のように.lazyを付けるとテキストに文字を入力しただけでは{{ message }}の文字は表示されません。
タブキーもしくはenterキーを押して初めて、

このように表示されます。入力文字を確認してから表示させたい場合などに使用すると良いと思われます。

##.trim
.trimは入力値から前後の空白を削除してからデータ代入することができる。

HTML

  <p>
    <input type="text" v-model.trim="message">
  </p>
    <p>
    <input type="text" v-model="message">
  </p>
  <pre>
    {{ $data }}
  </pre>

Vue.js

   data: {
     message: ''
   }

通常の場合だと、文字を入力する前にspace（空白）を入れたら、

このようにそのまんま表示されます。
しかし、.trimを入れると、

空白を入れても削除されて出力されます。空白があっても良いケースではないときに使用されます。

##.number
.numberは入力値を数値型に型変換してからデータに代入することができる。

HTML

  <p>
    <input type="number" v-model.number="age">
  </p>
  <p>
  {{ age + 10 }}
  </p>

Vue.js

   data: {
     age: 0
   }

通常の場合は{{ age + 10 }}でテキストに10を入力すると、

このように10と10を並べるような形になってしまいます。
.numberをつけてあげると、

入力値が数値型に型変換されてから表示されるので、このように足し算された形で表示されるようになりました。

#まとめ
・.lazyはバインドのタイミングを遅延させることができる。
・.trimは入力値から前後の空白を削除してからデータ代入することができる。
・.numberは入力値を数値型に型変換してからデータに代入することができる。

#最後に
今回は３種類の修飾子についてアウトプットしました。
修飾子は他にも色々あるので少しずつ活用していきます。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

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

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