Vue.jsを使ったテーブル表示のサンプル

※2016/02/28サンプルプログラムのエラー修正しました。

Vue.jsを使ったテーブル表示のサンプルを作ってみました。
前回のFixed TableをベースにVue.jsを追加した構成です。
どちらかと言えばVue.jsを試したくて作ったので余り実用的でないかも！

Vue.jsのGrid Component Exampleでは判り難かったのですが

var vm = new Vue({ /* options */ })
vm.$el // The View
vm.$data // The Model

この記述を頼りにテーブルを定義した後で表示するデータを差し替えることでページの切り替えをおこないました。

ただし、偶数奇数行の色分けやマウスホバーでの色付けがうまく行かず、setTimeoutで100ms後に行うとうまく行きました。

Vue.jsの使い方として正しいか、よく判っていませんので、参考にされる場合は自己責任でお願い致します。

VUE.JS & JQUERY & FIXED TABLE によるデータ一覧表示サンプル