vueページング効果の作成

まずjs効果:

 
 

     var pagitation=new Vue({
         el:'#app',
         data: {
             //      
             sign:'...',
             //      
             signIndex:3,
             //    
             totalPageCount: 8,
             //    
             currentPage:1,
             //           
             pagingList:[],
             lists:[]
         },
         watch: {
             totalPageCount:function(val) {
                 var that = this
                 if (!val || val == '') return;
                 that.currentPage = 1;
                 that.init()
             },
             currentPage:function(val) {
                 var that = this
                 that.init()
             }
         },
         methods: {
             //      
             getorder:function(){
                 this.$http.post("     URL",{
                     page:this.currentPage //      
                 }, {
                     headers: {
                         "X-Requested-With": "XMLHttpRequest"
                     },
                     emulateJSON: true
                 }).then(function(res){
                     json=JSON.parse(res.body);
                     this.lists=json.data.lists;           //    
                     this.totalPageCount=json.data.maxPage;//     
                 })
             },
             //      
             fetchData:function() {
                 var that = this

                 that.pagingList = [];
                 var tmp = null;

                 if ((that.totalPageCount) > 6) {
                     if (((that.totalPageCount-1) == (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) > 5) {
                         for (var i=1;i<7;i++) {
                             if (i < that.signIndex) {
                                 tmp = {key:i, value:i }
                             } else if (i== that.signIndex) {
                                 tmp = {key:that.sign, value:0 }
                             } else if (i == (that.signIndex + 1) ) {
                                 tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
                             } else {
                                 tmp = {key:that.totalPageCount, value:that.totalPageCount }
                             }
                             that.pagingList.push(tmp)
                         }
                     } else if (((that.totalPageCount - that.currentPage) <= that.signIndex)){
                         var starNum = that.totalPageCount - 5;
                         for (var i=starNum;i<starNum+6;i++) {
                             tmp = {key:i, value:i }
                             that.pagingList.push(tmp)
                         }
                     } else {
                         var starNum = that.currentPage - 1;
                         for (var i=1;i<7;i++) {
                             if (i < that.signIndex) {
                                 tmp = {key:(starNum - 1) + i, value:(starNum - 1) + i }
                             } else if (i== that.signIndex) {
                                 tmp = {key:that.sign, value:0 }
                             } else if (i == (that.signIndex + 1) ) {
                                 tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
                             } else {
                                 tmp = {key:that.totalPageCount, value:that.totalPageCount }
                             }
                             that.pagingList.push(tmp)
                         }
                     }
                 } else {
                     for (var i =0; i <that.totalPageCount; i++) {
                         tmp = {key:i+1, value:i+1 }
                         that.pagingList.push(tmp)
                     }
                 }
             },
             //       
             next:function(num) {
                 var that = this
                 if (num <= 1) that.currentPage = 1;
                 else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
                 else that.currentPage = num;
                 //location.href="/asm/order?page"+that.currentPage;
             },
             init:function() {
                 var that = this

                 that.fetchData();
                 that.getorder();
             }
         },
         mounted:function() {
             var that = this

             that.init()
         }
     });
 

html部分

         

                         

                             
                             

                              

                                 
{{item.orderNo}}
	                             

                                     
{{item.createTime}}
                                 
                                 

                                     
{{item.channel}}
                                 
                                 

                                     
{{item.amount}}
                                 
                                 

                                     
   
                                         
                                 

                                 

                                     
   
                                 
                             

                              
    
                             


                             
                         
             
             

                 
 {{currentPage}}/{{totalPageCount}} 
                 

                     

                          1ページ
                          1ページ
                     
                     
 のページ
                     

                         {{item.key}}
                         {{item.key}}
                     

                     
 のページ
                     

                           ページ
                           ページ
                     
                 
             
     

スタイルは自分で追加します.またgetlistsはバックグラウンドリクエストデータを取得します.必要でない場合は、dataに直接値を割り当てることを削除できます.