【Vue.js】v-modelの使い方について

本記事では、Vue.jsでv-modelの使い方についてサンプルコードを用いて解説しています。

Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで

本書情報

著者	川口 和也
発売日	2018/9/22
ページ数	893ページ
Kindle版	○
レビュー (Amazon)	(93件)

Ｖｕｅ．ｊｓ入門 基礎から実践アプリケーション開発まで /技術評論社/川口和也

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
はじめてのVue.js 3 入門！
導入からアプリケーション開発まで体系的に学ぶ

動画情報

作成者	中村 裕太
学習時間	5時間
受講者数	12,910人
レビュー	(2,509件)

動画の詳細はこちら

v-modelとは

v-modelとは、双方向データバインディングと呼ばれフォームを構築するときによく使われる機能で、dataとフォームの値を連動させることが出来ます。

よく似た機能でv-bindがありますが、v-bindはdataからHTMLへの変更のみでHTMLの値が変わっても変化はありません。一方、v-modelはHTMLの値に変更があった場合に、自動でdataの値を更新します。

v-modelはv-bindとv-onを組み合わせ

v-modelを使わなくても、v-bindとv-onを組み合わせれば実現できそうと思った方も多いと思います。
実はv-modelは、v-bindとv-onをまとめて1行で書けるようにVue.jsが用意してくれているディレクティブになります。

<input v-model="searchText">

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

v-modelの使い方

<input type="text" v-model="sample">

new Vue({
  data:function(){
    return {
      sample:""
    }
  }
})

v-modelで設定した値を、dataに定義します。
上記では、inputタグにv-model=”sample”を設定しているので、data内にsampleを定義します。

サンプルコード

下記のサンプルコードでは、ユーザーが入力された値が「」の中に反映されます。

試しにテキストボックスの中に文字を入力してみてください。

<div id="app">
  <input type="text" v-model="textData">
  <p>入力された値は「{{textData}}」です。</p>
</div>

new Vue({
  el:"#app",
  data:function(){
    return {
      textData:""
    }
  }
})

dataにtextDataを定義し、初期値に空文字を設定します。
初期値に空文字以外を設定すると、inputタグと連動しているため初期表示でテキストボックスに値が入力されている状態になります。

まとめ

今回はVue.jsのv-modelついてご紹介しました。
最後にポイントを軽くおさらいしましょう。