◀ 6.

【Vue.js】modelとdata フォーム入力値とDOMへの即時反映

▶
編集

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

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

 

実装例

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

 

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. on:click クリック時のイベント処理
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法
2019-07-18 23:05:26 T 578

人気ページ

最近更新/作成されたページ