本記事では、Vue.jsでv-modelの使い方についてサンプルコードを用いて解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで
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の使い方
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ついてご紹介しました。
最後にポイントを軽くおさらいしましょう。
- v-modelは双方向にデータをやり取りできる
- v-modelはv-bindとv-onを一つに合わせたディレクティブ