この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:T
更新日時:2019-07-18 22:52:34

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

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

 

実装例

html

<div id="app">

  <form>

      <input v-model="value">

      <p>value is: {{ value }}</p>

  </form>

</div>

 

js

var app = new Vue({

  el: '#app',

  data: {

    value: 'init_value',

  }

})

 

出力結果

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