v-model - 忘備録

Vue.jsのディレクティブv-modelについての記事です。

v-modelを使用すると双方向バインディング¹が使用できる。

例はinputに登録してあるデータを表示し、編集するたびにデータが書き換えられるというものです。

リアルタイムで表示も更新されます。

先に動作サンプルです。

使い方は要素にv-model="data"を記述します。

new Vue({
  el: "#app",
  data: {
    message: 'こんにちは'
  }
})

Html

<div id="app">
  <div>
    <input v-model="message" type="text">
    <pre>{{ message }}</pre>
  </div>
</div>

これでインプットに入力した値がリアルタイムで同期され、Vue.jsのデータを書き換えていきます。

修飾子

使用できる修飾子にはlazy、number、trimがあります。使用方法はv-modelの後に続けて記述するだけです。

例：v-model.lazy

changeイベント発火後にデータをバインディングします。

Html

<div id="app">
  <div>
    <input v-model.lazy="message" type="text">
    <pre>{{ message }}</pre>
  </div>
</div>

エンターキーを押したり、inputのフォーカスをやめる(input以外のところをクリックする)と、同期され、データが書き換えられます。

データをnumber型で返します。

例えばinputの場合だとtype="number"を指定しても、文字列が返されます。

そこでこの修飾子を使用することでnumber型のデータを保存することが可能になります。

以下の例では{{ number + 1 }}として計算式を記述していますが、.number修飾子を指定していない方では文字列として返されてしまうため機能していないことがわかります。

入力値の前後の空白を取り除きます。

どれも使いどころが多そうです。