【Vue.js】双方向バインディング:v-model

入力フォームにタイプすると要素を即座に更新します。v-modelは、input要素、textarea要素、select要素などが対象です。v-modelでデータと処理を紐づけることで、データとUIに集中できます。

v-model

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Vue.js'
  }
});

画像では分かりにくいですが、入力フォームにタイプするとその内容が即座にブラウザに描画されます。

{{}}内にJavaScriptの式を書く

{{}}内にJavaScriptの式が書けます。試しに入力した文字を大文字に変換する処理と小文字に変換する処理を書きます。HTML側を変更するだけでできます。

<div id="app">
  <input type="text" v-model="message">
  <p>Hello {{ message }} !</p>
  <p>Hello {{ message.toUpperCase() }} !</p>  //大文字に変換
  <p>Hello {{ message.toLowerCase() }} !</p>  //小文字に変換
</div>

生のJavaScriptで書くともっとコードが多くなります。しかし、Vue.jsで書くとコードの分量が減り、データとUIに集中できます。

参考サイト

• フォーム入力バインディング — Vue.js