Vue

【Vue.js 2.9】はじめてのVue.js フォーム入力修飾子

  /

・フォーム入力バインディングの修飾子紹介。
・lazy,trim,number

はじめに

今回はフォーム入力項目の双方向バインディングに対する修飾子の紹介となります。

【Vue.js 2.9】はじめてのVue.js フォーム入力バインディング ・フォーム入力項目の双方向バインディング紹介　テキストエリア、チェックボックス、セレクトボックス はじめに 今回はテキス...

環境情報

名前詳細
Vue.js開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタJSFiddle（https://jsfiddle.net/）

lazy

lazyはバインディングに遅延を与えます。
通常、双方向バインディングはリアルタイムで反映されるのですが、lazyを付与することでフォーカスが外れたときにバインディングされるようになります。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input type='text' v-model.lazy='message'>
  <p>
    {{message}}
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
})

画像だと分かりにくいですが、「1」を入力しただけではmessage変数に格納されず
「123」を入力してフォーカスが外れるとmessage変数に格納されて表示されるようになります。

入力した値によって結果を取得する処理などの場合、1文字入力するたびに処理が動くとパフォーマンスに影響が出ます。
そういったところにlazyを入れることで改善を図ることが出来ます。

trim

続いてはtrimです。
trimは入力した値の前後にある空白を除去します。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input type='text' v-model='message'>
  <input type='text' v-model.trim='message'>
  <p>
    {{message}}
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
})

また画像だと分かりにくいですが、右側のテキストボックスに「半角スペース+abc」を入力し、フォーカスが外れると、1文字目の半角スペースが除去されます。

前述のlazyと組み合わせることも可能です。「v-model.trim.lazy」などの書き方で対応出来ます。

number

最後にnumberです。
こちらは、入力値を数値で保持したい場合などに利用します。
例えば年齢のテキストボックス（type=number）を用意してもバインディングの型は文字列型に変換されます。

numberを使うことで数値で保持するようになりその後の処理で変換を意識することが無くなります。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input type='number' v-model='message'>
  <input type='number' v-model.number='message'>
  <p>
    {{message + 10}}
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      message: 0
    }
})

numberが設定されている右側のテキストボックスに51と入力した場合は、Pタグ内の処理「+10」の通り10加算された61が表示されます。（画像2枚目）

一方、numberが設定されていない左側のテキストボックスに511と入力した場合は、Pタグ内の処理「+10」は文字列結合となり「51110」が表示されます（画像3枚目）

RELATED POST