[Vue.js]v-modelの使い方

Vue.jsにおけるv-modelの使い方について解説します。

Vue.jsのv-modelとは

dataオブジェクトの値とinput要素で入力した値を連動することができます。

input要素で入力した値をjs側で反映することができるますし、js側で更新したデータをhtml側で表示させることもできます。(双方向データバインディング)

<div id="app">
<input v-model='text'>
{{ text }}
<input type="checkbox" v-model='check'>
{{ check }}
</div>

new Vue({
  el: '#app',
  data: {
    text: '',
    check: true
  }
})

フォームに入力した値をそのまま出力させるコード。

また、チェックボックスのオン/オフでtrue/falseを返します。

v-modelの注意点

htmlのvalueは無視される

inputタグの中に初期値、valueを記載した場合これは無視されます。

js側で記載した初期値が反映されるので、何か初期値を設定したい時はdataの方で反映させます。

v-modelに@changeを書かない

input要素のイベントハンドリングとして@changeなどがありますが、v-modelを記述した場合はこれは不要。

なぜなら、v-model自体がイベントハンドリングを兼ねているからです。