【vue.js入門 #7】v-model解説！フォームでよく使う双方向データバインディングとは？

今回解説していく内容は、v-modelディレクティブについてです。

主にフォームで利用され、入力された値を受け取って表示に反映させる事ができるようになります。

これを双方向データバインディングといい、vue.jsのデータオブジェクトとhtml側のテンプレートの表示を同期させるのです。

ユーザーからの情報を受取り、それを起点にアプリが動作しますので、フロントエンド開発ではフォーム周りは非常に重要な部分となってきます。

テキスト入力と表示を同期

まずは、テキストボックスの値と表示の同期をさせてみましょう。

サンプルのテキストはこちら。

私の名前は○○です。

テキストボックスに名前を入力することで○○の部分が同期されます。

html

<input type="text" v-model="name">
<p>私の名前は{{ name }}です。</p>

js

new Vue({
   el: '#app',
   data: {
       name: '名無し',
   }
})

v-modelディレクティブにnameプロパティを紐付けることで同期させることができます。

ここで注意してほしいのは、inputタグにvalue属性を設定されても無視され、vue.jsで設定しているプロパティが表示されます。

checked属性やselected属性も同様に無視されます。

ラジオボタンの値と同期

inputタグのラジオボタンに同一のv-modelを設定することで、dataオブジェクトと動悸させることができます。

ラジオボタンのvalue属性とv-modeに設定されたプロパティが一致すると選択された状態になります。

html

<div>
   <label>
       <input type="radio" v-model="pet" value="いぬ">
       いぬ
   </label>
</div>
<div>
   <label>
       <input type="radio" v-model="pet" value="ねこ">
       ねこ
   </label>
</div>
<p>ペットは{{ pet }}を飼っています。</p>

js

new Vue({
   el: '#app',
   data: {
       pet: 'ねこ',
   }
})

複数選択のチェックボックス

チェックボックスはラジオボタンと同様ですが、複数選択する場合は配列として格納されます。

html

<p>あなたの好きな動物選んでください</p>
<div>
   <label>
       <input type="checkbox" value="ライオン" v-model="animals">ライオン
   </label>
</div>
<div>
   <label>
       <input type="checkbox" value="トラ" v-model="animals">トラ
   </label>
</div>
<div>
   <label>
       <input type="checkbox" value="ゾウ" v-model="animals">ゾウ
   </label>
</div>
<div>
   <label>
       <input type="checkbox" value="キリン" v-model="animals">キリン
   </label>
</div>
<p>回答: {{animals}}</p>

js

new Vue({
   el: '#app',
   data: {
       animals: [],
   }
})

選択ボックス

こちらも、他と同じですね。

select要素にv-modelを指定すれば値を同期することができます。

html

<p>あなたの好きな動物選んでください</p>
<select v-model="animal">
   <option value="">選択してください</option>
   <option>ライオン</option>
   <option>トラ</option>
   <option>ゾウ</option>
   <option>キリン</option>
</select>

js

new Vue({
   el: '#app',
   data: {
       animal: ''
   }
})

v-modelの修飾子で動作にオプションをつける

v-modelディレクティブには修飾子というものがあり、バインドの動作を制御することができます。

書き方はv-modelディレクティブの後ろにドット（.）で繋いで付与します。

複数の修飾子を連結させることも可能です。

v-model.number=”...”
v-model.number.lazy=”...”

修飾子の主な種類はこちら。

• nunber（数字に限定）
• lazy（送らせて処理する）
• trim（空白を除去）

この３つをまとめて設定するとこのようになります。

html

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

js

new Vue({
   el: '#app',
   data: {
       testNum: 0,
   }
})

まとめ

v-modelディレクティブを使うことで、よりvue.jsらしくアプリっぽい動作ができるようになりました。

jqueryだと双方向データバインディングはここまで簡単なコードで実装することはできません。

これがvue.jsを使うメリットです。