国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Memandangkan dalam projek, data latar belakang dihantar ke bahagian hadapan pada satu masa, bahagian hadapan perlu melakukan beberapa pemprosesan halaman.
Vue2+Axios digunakan untuk membuat permintaan ajax Pada masa ini, console.log data bahagian belakang boleh dicetak dengan jayanya, tetapi ia tidak boleh dikemas kini pada 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>
             <!--分頁按鈕區(qū)域-->
            <p class="pages" v-show="onn">   
                <button class="previem" @click="page('last')" v-show='curPage>0'>上一頁</button>
                <button class="next" @click="page('!last')" v-show="curPage<pageCount-1">下一頁</button>
            </p>
        </section>

JS

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

Format data simulasi dikembalikan

{
    "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"
        }]
}

Saya dah semak banyak kali, tapi masih ada gaya tapi tiada data, harap pakar boleh bagi nasihat