1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Vue.js】v-modelディレクティブとv-bindディレクティブの違い

Last updated at Posted at 2020-12-25

##はじめに
この記事では、「v-modelディレクティブ」と「v-bindディレクティブ」の違いについて説明しています。

##v-modelディレクティブとは?
v-modelディレクティブは、フォーム要素の値とプロパティ間でデータバインディングを有効化するディレクティブです。つまり、フォーム要素が変更されるとその値がプロパティ要素に反映され、逆に、プロパティ要素が変更されるとその値がフォーム要素に反映されるようになります。

v-modelディレクティブは次のように使用します。
<input v-model="プロパティ名">

また、こうしたデータバインディングの機能を「双方向データバインディング」と呼びます。

##双方向データバインディング
双方向バインディングは、単方向のデータバインディングの組み合わせ(v-onディレクティブとv-bindディレクティブ)で成り立っています。このことを図を使ってわかりやすく説明したものが次のものです。

スクリーンショット 2020-12-25 22.09.17.png

##まとめ
v-modelディレクティブでは双方向(フォーム要素⇄プロパティ)で、v-bindディレクティブでは単方向(プロパティ→フォーム要素)で同期することができるといった違いがあります。

###参考文献
関利晴(2020) 『21Stepで体得 Vue.jsハンズオン』

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?