vue写页码

用引入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 ){ //如果当前的激活的项 小于要显示的条数
                     //总页数和要显示的条数那个大就显示多少条
                     var i = Math.min(this.showItem,this.allpage);
                     while(i){
                         pag.unshift(i--);
                     }
                 }else{ //当前页数大于显示页数了
                     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;
          //这里可以发送ajax请求
      }
    }
  })
var vm = new Vue({
  el:'#app',
})
</script>

实现效果请见：demo
点击 下载源码