Vue.js

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

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

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

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

参考書が苦手な人は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が用意してくれているディレクティブになります。

以下のコードは、v-modelを使ったものとv-bindとv-onを組み合わせたものですが、挙動は全く同じになります。
<input v-model="searchText">

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

v-modelの使い方

v-modelの使い方は以下の通りです。
<input type="text" v-model="sample">
連動させたい要素に対してv-modelを設定し、値にdataを設定します。
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>
テキストボックスに入力された値をdataのtextDataと連動させたいので、inputタグにv-model=”textData”を設定します。
new Vue({
  el:"#app",
  data:function(){
    return {
      textData:""
    }
  }
})

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

まとめ

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

ポイント

  • v-modelは双方向にデータをやり取りできる
  • v-modelはv-bindとv-onを一つに合わせたディレクティブ

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村