亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Since in the project, the background data is sent to the front end at one time, the front end needs to do some paging processing.
Vue2 Axios is used to make ajax requests. Currently, the backend data console.log can be printed successfully, but it cannot be updated on the dom.

html

 <section class="main">
            <ul class="list">
                <li v-for="info in listt2">
                    <img src="#" v-bind:alt="info.Name">                                                     
                    <h4> <a class="talk" target="_blank" v-bind:href="'content.html?'+info.id">{{ info.title }}</a></h4>
                    <span class="ckey">【{{ info.key }}】 </span> <span style="color: #ffffff;"> {{info.id}}</span>
                </li>
            </ul>
             <!--分頁(yè)按鈕區(qū)域-->
            <p class="pages" v-show="onn">   
                <button class="previem" @click="page('last')" v-show='curPage>0'>上一頁(yè)</button>
                <button class="next" @click="page('!last')" v-show="curPage<pageCount-1">下一頁(yè)</button>
            </p>
        </section>

JS

  Vue.prototype.$ajax = axios;  //修改原型鏈 
    var vm = new Vue({
        el: '.main',
        data: {
            listt2:[ ],  //頁(yè)面要展示的數(shù)據(jù)
            pageSize:10,  //翻頁(yè)每頁(yè)顯示數(shù)據(jù)
            curPage:0,  //當(dāng)前頁(yè)面
            pageCount:'',  //總共頁(yè)面數(shù)
            onn:true,  //默認(rèn)顯示分頁(yè)
            items:' ', //后臺(tái)數(shù)據(jù)         
        },
        created:function(){
            //Ajax獲取后臺(tái)數(shù)據(jù)，獲取的數(shù)據(jù)存儲(chǔ)在 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();  //調(diào)用分頁(yè)
        },
        methods: {
            page: function (el) {    //點(diǎn)擊翻頁(yè)
                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 () {      //分頁(yè)處理
                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]);
                        }
                    }
                }
            }
        }
        })

Returned simulation data format

{
    "getJson":[
        {
            "id":"59",
            "key":"science",
            "title":" 動(dòng)物也是科技宅，這些智能科技裝備你想要嗎？ ",
            "time":"2017-05-12",
            "name":"兩個(gè)質(zhì)子",
            "eng":"lianggezhizi"
        },
        {
            "id":"60",
            "key":"science",
            "title":" 肯定你沒見過的養(yǎng)老新科技！ ",
            "time":"2017-06-19",
            "name":"老年健康生活方式",
            "eng":"aged-expo"
        }]
}

I have checked it several times, but there is still only a style but no data. I would like some advice from an expert.