本記事では、Vue.jsでv-modelの使い方についてサンプルコードを用いて解説しています。
- Vue.jsを初歩から実践まで徹底的に解説
- Javascript初心者でも分かりやすい
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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を一つに合わせたディレクティブ