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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

本書情報

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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ついてご紹介しました。
最後にポイントを軽くおさらいしましょう。