この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-05-17 06:28:43

タイトル: modelとdata フォーム入力値とDOMへの即時反映
SEOタイトル: 【Vue.js】modelとdata フォーム入力値とDOMへの即時反映

v-modelディレクティブを使用することでフォームの入力欄を作成してDOMと同期させることが出来ます。

dataを使用することでhtml上の値を扱うことが出来るようになります。

 

実装例

html

 

      v-model="value">

     

value is: {{ value }}

 

 

js

var app = new Vue({

  el: '#app',

  data: {

    value: 'init_value',

  }

})

 

出力結果

inputの値とpタグ内の値がリアルタイムで同期されます。