タイトル: 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タグ内の値がリアルタイムで同期されます。