vue制作分页效果

首先js效果：

<script src="....js/vue.js"></script>
 <script src="..../js/vue-resource.min.js"></script>
 <script type="text/javascript">

     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()
         }
     });
 </script>

html部分

<div id="app" >         

                         <table>
                             
                             <tbody>
                              <tr v-for="(item,index) in orders">
                                 <td style="border:1px solid #f1f2f7">{{item.orderNo}}</td>
	                             <td style="border:1px solid #eeeff2">
                                     <p>{{item.createTime}}</p>
                                 </td>
                                 <td style="border:1px solid #eeeff2">
                                     <p>{{item.channel}}</p>
                                 </td>
                                 <td style="border:1px solid #eeeff2">
                                     <p style="color:#5368fb">{{item.amount}}</p>
                                 </td>
                                 <td style="border:1px solid #eeeff2" v-if="item.status==0">
                                     <p  value="未支付" disabled>未支付</p>
                                     <button  value="再次支付">再次支付</button>
                                 </td>

                                 <td style="border:1px solid #eeeff2" v-else>
                                     <p value="已支付" disabled>已支付</p>
                                 </td>
                             </tr>

                              <td colspan="5" v-if="orders.length<=0" style="background-color: #ffffff;">暂无订单</td>
                             <!--此处是实时信息数据表-->


                             </tbody>
                         </table>
             <!-- 表格 -->
             <div class="aso-pg-rank__pagination" id="aso-pg-rank__pagination" v-cloak>
                 <div>共{{currentPage}}/{{totalPageCount}}页</div>
                 <ul class="aso-pagination" first-text="第一页" last-text="最后一页" max-size="50" next-text="下一页" previous-text="上一页">
                     <li class="pagination-first  ">
                         <a v-if="currentPage == 1" >第一页</a>
                         <a v-else href="javascript:;" @click="next(1)">第一页</a>
                     </li>
                     <li class="pagination-prev" v-if="currentPage>1"><a href="javascript:;" @click="next(currentPage-1)">下一页</a></li>
                     <li v-for="item in pagingList" class="pagination-page">
                         <a v-if="currentPage==item.key || sign ==item.key" class="activeye">{{item.key}}</a>
                         <a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a>
                     </li>

                     <li class="pagination-next" v-if="currentPage<totalPageCount"><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>
                     <li class="pagination-last">
                         <a v-if="totalPageCount == currentPage">尾页</a>
                         <a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
                     </li>
                 </ul>
             </div>
     </div>

样式自己加喽，另外getlists是获取后台请求数据，如果不需要则可以删去直接在data中给分页赋值