【Vue.js】データ配列を使ってテーブルを動的に生成してみる。

Javascript,開発

おはようございます。

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

今回は Vue インスタンスの生成時に配列を渡してあげて、それを元にテーブルを動的に生成するサンプルとなります。

スポンサーリンク

プログラム

css

css/style.css

html

index.html

v-for を使えば簡単に繰り返し処理ができますね。

Javascript

js/script.js

久しぶりに猫のデータが登場。みんな2歳くらい年取ったな。

起動してみる

初期表示
初期表示

無事、テーブルにデータが表示されました。

簡単ですね。

まとめ

ひとまずスクリプト内にデータ配列を定義しましたが、データベースからデータを取ってきて表示するのも簡単にできそうですね。

次回は動的にデータの追加や削除、更新なんかをやってみようと思います。

ではでは。

 

スポンサーリンク


関連するコンテンツ