由于在项目中，后台的数据一次性给前端，前端需要做一些分页的处理。
用的是Vue2+Axios 来做ajax请求 目前可以得到后端的数据console.log打印成功,但就是更新不上dom上。

html

 
 
  
 {{ info.title }}
 【{{ info.key }}】   {{info.id}} 
 
  
 上一页 下一页 
 

JS

Vue.prototype.$ajax = axios; //修改原型链 var vm = new Vue({ el: '.main', data: { listt2:[ ], //页面要展示的数据 pageSize:10, //翻页每页显示数据 curPage:0, //当前页面 pageCount:'', //总共页面数 onn:true, //默认显示分页 items:' ', //后台数据 }, created:function(){ //Ajax获取后台数据，获取的数据存储在 this.items var url = "api.json"; this.$ajax.get(url) .then(function (response) { var jsons = response.data.getJson; var self = this; this.items =jsons; console.log(self.items); }).catch(function (error) { console.log(error); }); this.fanye(); //调用分页 }, methods: { page: function (el) { //点击翻页 el == 'last' ? this.curPage-- : this.curPage++; var curtotal = this.curPage * this.pageSize; var tiaoshu = this.curPage * this.pageSize + this.pageSize; this.listt2 = this.items.slice(curtotal,tiaoshu); document.body.scrollTop = 0; }, fanye: function () { //分页处理 var _this = this; _this.listt2 = []; if (_this.items) { _this.pageCount = Math.ceil(_this.items.length / _this.pageSize); for (var i = 0; i < _this.pageSize; i++) { if (_this.items[i]) { _this.listt2.push(_this.items[i]); } } } } } })

返回的模拟数据格式

{ "getJson":[ { "id":"59", "key":"science", "title":" 动物也是科技宅，这些智能科技装备你想要吗？ ", "time":"2017-05-12", "name":"两个质子", "eng":"lianggezhizi" }, { "id":"60", "key":"science", "title":" 肯定你没见过的养老新科技！ ", "time":"2017-06-19", "name":"老年健康生活方式", "eng":"aged-expo" }] }

已检查多遍，仍是只有样式没有数据，还望大牛指点