【Vue.js】ボタンクリックで行の追加、更新、削除をしてみる。

Javascript,開発

おはようございます。

今日も引き続き Vue.js のお勉強。

今回はボタンをクリックして Vue インスタンスのデータを操作することで
関連付けられたDOMが更新されるというのを実際にやってみました。

スポンサーリンク

プログラム

css

css/style.css

html

index.html

追加、更新、削除ボタンを追加し、「v-on:click」に新たに定義した関数を指定。

javascript

js/script.js

methods を追加して、それぞれのボタンに設定する関数を定義しました。

起動してみる

初期表示
初期表示

初期表示。

行の追加
行の追加

追加ボタンをクリックした後。

行の更新
行の更新

更新ボタンをクリックした後。

行の削除
行の削除

削除ボタンを2回クリック。

まとめ

想像以上に画面(DOM)操作が楽!

久しぶりの新しいフレームワークで楽しいです。笑

次回はもう少し高度な操作も試してみたいですね。

ではでは。

 

スポンサーリンク


関連するコンテンツ