v-modelとは?v-on・v-bindとの違いと使い方

v-modelとは?v-onとv-bindとの違いと使い方

1100 回閲覧されました

みなさんこんにちは、WEB制作のエンジニアのjonioです。

v-modelディレクティブの使い方をすぐ忘れる自分への備忘です。

v-bindディレクティブとv-onディレクティブを合わせた物ですが違いを見るためにv-onディレクティブとv-bindディレクティブの解説をまずします。

 

v-bindディレクティブ

コードを↓にします。

これで↓と表示されます。

v-bindディレクティブは17行目の「content:”〜”」の〜が9行目のcontentに入り17行目のcontent:”〜”の〜から一方的に9行目のcontentを決定します。

「17行目のcontent」→「9行目のcontent」の流れです。

次はv-onディクティブです。

 

v-onディレクティブ

コードを↓にします。

これで↓になります。

9行目の「vOn」の中身を22行目〜24行目で決めていますがinputタグの中に文字を書くことで9行目のvOnが作動してinputタグの中に書いた内容が10行目の「text」に表示されます。

このようにv-onディレクティブは9行目の「vOn」→23行目の「this.text = e.target.value」の一方通行です。

次はv-modelディレクティブです。

 

v-modelディレクティブ

コードを↓にします。

これで↓になります。

v-onディレクティブの時と似ていると思いますが少し違います。

v-onディレクティブの時はinputタグの中に文字を書いていくと{{text}}の中に書いた文字が表示されていきました(vOn→text)が今回はinputタグの中の文字が最初から{{vModel}}に表示されています。

つまりinputタグの中の文字が最初から{{vModel}}に表示されるので「19行目のvModel」→「9行目のvModel」(v-bindディレクティブ)ができてinputタグの中の文字を変えると{{vModel}}の中の文字も変わるので「9行目のvModel」→「19行目のvModel」(v-onディレクティブ)ができるのでv-modelディレクティブはv-onディレクティブとv-bindディレクティブを合わせたものということができます。

だからv-modelディレクティブはv-onディレクティブ+v-bindディレクティブと認識しましょう。

 

やってはいけない書き方

v-modelディレクティブはv-onディレクティブとv-bindディレクティブを併せた物なので↓の書き方でも動きますが意味がないです。

こんな時はv-modelがあるのでそれを使いましょう。