基礎からメモ： Vue.js CH1-p40-41 フォーム入力との同期

Vue.js

フォーム入力とVueインスタンスを関連付けるには、v-modelディレクティブを使う。

[index04.html]

  <div id="app">
    <p>{{ message }}</p>
    <p>INPUT-1: <input v-model="message"></p>
    <p>{{ count * 2 }}</p>
    <p>INPUT-2: <input v-model.number="count"></p>
  </div>

[main04.js]

var app = new Vue({
  el: '#app',
  data: {
    message: "初期メッセージ",
    count: 100
  }
})

フォームINPUT-1に入力した文字は、v-model="message"でapp.messageと同期されるので、上部のメッセージの文字が同期する。 またINPUT-2は、初期値100のapp.countと同期される。

簡単な計算ならマスタッシュの中でできてしまうので、INPUT-2の値は常にｘ２されて上部に表示される。

v-model.numberの.numberは修飾子と呼ばれるもので、いろんな種類がある。.number修飾子は入力を数値として受け取るもの。

  • フォーム入力とVueインスタンスを関連付けるには、v-modelディレクティブを使う。
  • マスタッシュ記法の中で簡単な計算ができる。
  • 入力を数値として受け取るには、v-modelに.number修飾子を付ける。