【解説】Vue.jsのv-modelの使い方【サンプルコードあり】

パソ君

・Vue.jsのv-modelって何？どう使うの？

こんな疑問にお答えします。

「v-model」とは、双方向データバインディングが可能なディレクティブ。

変数と値を同期してくれるのが特徴です。

今回自分用のメモとして「v-model」についてまとめてみました。

ジト

参考にどうぞ

ということで、この記事では「Vue.jsのv-modelの使い方」について解説していきます！

【解説】Vue.jsのv-modelとは？

「v-model」はディレクティブの1つで、双方向データバインディングが可能です。

ビュー（画面）の値と変数の値を自動的に同期してくれるのが、双方向データバインディングです。

双方向データバインディング

下記のようにinputタグにv-modelを付与したとします。

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

付与した変数の値を、data内に入れます。

const app = Vue.createApp({
  data: () => ({
    message: ''
  })
}).mount('#app')

これでinputタグの値と、変数の値が自動的に同期されることに。

入力欄の値を変えたり、変数の値を変えると、自動的にそれぞれ値が同期して変更されるようになります。

【解説】Vue.jsのv-modelの使い方【サンプルコードあり】

実際に「v-model」を使って、双方向データバインディングされるサンプルを作ってみました。

それがこちらです↓

See the Pen vue　v-model① by jito-coder (@jito-coder) on CodePen.

<div id="app">
  <input v-model="message" type="text">
  <p>「{{ message }}」←入力した値が同期</p>
</div>

const app = Vue.createApp({
  data: () => ({
    message: ''
  })
}).mount('#app')

inputタグの入力値を変えると、messageの変数の値も変わるので、pタグ内のmessage部分の値も自動的に変更されます。

属性は無視

ちなみに「v-model」を使っている時、属性は無視されます。

下記のようにvalue属性に値を入れても、「v-model」の値が表示されるのが特徴です。

<input v-model="message" type="text" value="こんにちは">

ちなみにv-model修飾子というものも存在します。
詳しくはこちら↓

2024年5月19日 【解説】Vue.jsのv-model修飾子の種類と使い方【.lazy｜.trim｜number】

【解説】Vue.jsのv-modelの使い方【サンプルコードあり】：まとめ

ジト

v-modelを使う時はためしてみてね！

ちなみにv-modelを使うことで、フォーム部分で使う部品を動的に利用できますよ。

下記記事らをどうぞ↓

2024年6月2日 【解説】Vue.jsでラジオボタンを動的に使う【サンプルあり】

2024年6月2日 【解説】Vue.jsでセレクトボックスを動的に使う【単体／複数】

2024年6月2日 【解説】Vue.jsでチェックボックスを動的に変える【単体／複数】

2024年6月2日 【解説】Vue.jsでテキストエリアをバインディングする方法