一款基于vue2.0的分页组件---写在页面内

通过 Vue2.0 实现的分页

可自由设置分页显示的多少、上一页、下一页、省略号等，也可直接输入跳转到的页码进行跳转，分页的样式可自由调整

// 1、页面的 head 部分，需要设计好页面的样式

.page { 
  font-weight: 900; 
  height: 40px; 
  text-align: center; 
  color: #888; 
  margin: 20px auto 0; 
  background: #f2f2f2; 
} 
 
.pagelist { 
  font-size: 0; 
  background: #fff; 
  height: 50px; 
  line-height: 50px; 
} 
 
.pagelist span { 
  font-size: 14px; 
} 
 
.pagelist .jump { 
  border: 1px solid #ccc; 
  padding: 5px 8px; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  cursor: pointer; 
  margin-left: 5px; 
} 
 
.pagelist .bgprimary { 
  cursor: default; 
  color: #fff; 
  background: #337ab7; 
  border-color: #337ab7; 
} 
 
.jumpinp input { 
   55px; 
  height: 26px; 
  font-size: 13px; 
  border: 1px solid #ccc; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  text-align: center; 
} 
 
.ellipsis { 
  padding: 0px 8px; 
} 
 
.jumppoint { 
  margin-left: 30px; 
} 
 
.pagelist .gobtn {} 
 
.bgprimary { 
  cursor: default; 
  color: #fff; 
  background: #337ab7; 
  border-color: #337ab7; 
}

// 2、页面的 body 部分，在多个 div 嵌套中放入多个 span 标签来展示分页

<div id="app"> 
  <div> 
    <div class="page"  v-show="show"> 
      <div class="pagelist"> 
        <span class="jump"v-show="current_page>1" @click="{current_page--}">上一页</span> 
        <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span> 
        <span class="ellipsis"  v-show="efont">...</span> 
        <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span> 
        <span class="ellipsis"  v-show="efont&&current_page<pages-4">...</span> 
 
        <span class="jump" @click="{current_page++}">下一页</span> 
        <span v-show="current_page<pages-1" class="jump" class="jump" @click="jumpPage(pages)">{{pages}}</span> 
 
        <span class="jumppoint">跳转到：</span> 
        <span class="jumpinp"><input type="text" v-model="changePage"></span> 
        <span class="jump gobtn" @click="jumpPage(changePage)">GO</span> 
      </div> 
    </div> 
  </div> 
</div>

// 3、页面底部，通过远程调用 Vue 库，或者引入下载好的 Vue.js，实例化分页并且设置好参数

<script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 
<script> 
var newlist = new Vue({ 
  el: '#app', 
  data: { 
    current_page: 1, //当前页 
    pages: 50, //总页数 
    changePage:'',//跳转页 
    nowIndex:0 
  }, 
  computed:{ 
     show:function(){ 
         return this.pages && this.pages !=1 
     }, 
     efont: function() { 
       if (this.pages <= 7) return false; 
       return this.current_page > 5 
     }, 
     indexs: function() { 
 
       var left = 1, 
         right = this.pages, 
         ar = []; 
       if (this.pages >= 7) { 
         if (this.current_page > 5 && this.current_page < this.pages - 4) { 
           left = Number(this.current_page) - 3; 
           right = Number(this.current_page) + 3; 
         } else { 
           if (this.current_page <= 5) { 
             left = 1; 
             right = 7; 
           } else { 
             right = this.pages; 
 
             left = this.pages - 6; 
           } 
         } 
       } 
       while (left <= right) { 
         ar.push(left); 
         left++; 
       } 
       return ar; 
     }, 
   }, 
  methods: { 
    jumpPage: function(id) { 
      this.current_page = id; 
    }, 
  }, 
}) 
</script>

展示效果：