用引入vue.js的方法做頁碼

    <script type="text/x-template" id="page">
        <ul class="pagination" >
            <li @click="goto(1)" ><a href="#">首頁</a></li>
            <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一頁</a></li>
            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
              <a href="#" >{{index}}</a>
            </li>
            <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一頁</a></li>
            <li v-show="allpage > showItem" @click="goto(allpage)" ><a href="#">尾頁</a></li>
        </ul>
    </script>
    <div id="app">
          <page></page>
    </div>

<script>
Vue.component("page",{
    template:"#page",
      data:function(){
        return{
          current:1,
          showItem:5,
          allpage:13
        }
      },
      computed:{
        pages:function(){
              var pag = [];
                if( this.current < this.showItem ){ //如果當(dāng)前的激活的項(xiàng) 小于要顯示的條數(shù)
                     //總頁數(shù)和要顯示的條數(shù)那個大就顯示多少條
                     var i = Math.min(this.showItem,this.allpage);
                     while(i){
                         pag.unshift(i--);
                     }
                 }else{ //當(dāng)前頁數(shù)大于顯示頁數(shù)了
                     var middle = this.current - Math.floor(this.showItem / 2 ),//從哪里開始
                         i = this.showItem;
                     if( middle >  (this.allpage - this.showItem)  ){
                         middle = (this.allpage - this.showItem) + 1
                     }
                     while(i--){
                         pag.push( middle++ );
                     }
                 }
               return pag
             }
    },
    methods:{
      goto:function(index){
        if(index == this.current) return;
          this.current = index;
          //這里可以發(fā)送ajax請求
      }
    }
  })
var vm = new Vue({
  el:'#app',
})
</script>

實(shí)現(xiàn)效果請見：demo
點(diǎn)擊 下載源碼