首先下载 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 循环输出数据 就可以了。


Logo

前往低代码交流专区

更多推荐