php 实时在线更新数据，动态生成表格

首先下载 JQ 和 vue.js，思路是定时器轮询后台，jq同步获得实时数据，再用vue数据绑定形式，实现实时更新数据，动态生成表格。

html 部分

<div class="topTable">
   <table class="table table-hover table-bordered table-list" id="example-1">
      <thead>
      <tr>
         <th width="100">注册人数（人）</th>
         <th width="100">正在使用者人数（人）</th>
         <th width="100">本月新增人数（人）</th>
         <th width="100">本年新增人数（人）</th>
      </tr>
      </thead>
      <tr>
         <td>{{items[0]}}</td>
         <td>{{items[1]}}</td>
         <td>{{items[2]}}</td>
         <td>{{items[3]}}</td>
      </tr>
   </table>
</div>

实例化一个vue

var vm = new Vue({
    el: '#example-1',
    data: {
        items: []
    }
});

定时轮询 获得数据，在回调函数里面 用vue监控数据有没有变化，如果有变化就更新数据，操作DOM

setInterval(function () {
    $.ajax({
        type:"post",
        async:false,
        url:URL,
        data:{
        },
        cache:false,
        dataType:"text",
        success:function (data) {
            var obj = JSON.parse(data);
            //console.log(obj);
            vm.items = obj; // 更改数据
            vm.$el.textContent === obj;// false
            Vue.nextTick(function () {
                vm.$el.textContent === obj // true
            });
})
        }
    })
},1000)

直接按顺序COPY 就能用了。如果数据有 多条，就循环输出，用vue的 v-for 循环输出数据 就可以了。