vue.js 分页

先上样式的代码

<style>
	.fenye {font-weight: 900;height: 40px;text-align: center;color: #888;margin: 0 auto;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;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;}
	.pagelist .bgprimary {cursor: default;color: #fff;background: #fa7804;border-color: #fa7804;}
	.jumpinp input {width: 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 {font-size: 12px;}
	.bgprimary {cursor: default;color: #fff;background: #337ab7;border-color: #337ab7;}
	.pagelist .jump.disabled{pointer-events: none; background: #ddd;}
</style>

html 部分的代码

<div class="fenye" id="fenye" v-show="show">
	<div class="pagelist">
		  <span class="jump" @click="jumpPage(1)">首页</span>
		  <span class="jump" :class="{disabled:pstart}" @click="up_current_page">上一页</span>
		  <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
		  <span :class="{disabled:pend}" class="jump" @click="down_current_page">下一页</span>
		  <span class="jump" @click="jumpPage(pages)">尾页</span>
		  <!--<span class="jumppoint">跳转到：</span>
		  <span class="jumpinp"><input type="text" v-model="changePage"></span>
		  <span class="jump gobtn" @click="jumpPage(changePage)">跳转</span>-->
	</div>
</div>

JS部分的代码

<script src="js/vue.js"></script><!--引入vue.js文件，路径已实际情况为准-->
<script>
    var newlist = new Vue({
      el: '#fenye',
      data: {
        //分页插件
		current_page: 0, //当前页
		pages: 0, //总页数
		changePage:'',//跳转页
		nowIndex:0,
		show_page:5,//显示页码的数量
      },
      computed:{
        show:function(){
			return this.pages && this.pages !=1
		},
		pstart: function() {
			return this.current_page == 1;
		},
		pend: function() {
			return this.current_page == this.pages;
		},
		efont: function() {
			if (this.pages <= this.show_page) return false;
			return this.current_page > 5
		},
		ebehind: function() {
			if (this.pages <= this.show_page) return false;
			var nowAy = this.indexs;
			return nowAy[nowAy.length - 1] != this.pages;
		},
		indexs: function() {
			var left = 1,
			right = this.pages,
			ar = [];
			if (this.pages >= this.show_page) {
				if (this.current_page > 5 && this.current_page < this.pages - 4) {
				   left = Number(this.current_page) - 2;
				   right = Number(this.current_page) + 2;
				}else {
					   if (this.current_page <= 5) {
						 left = 1;
						 right = this.show_page;
					   } else {
						 right = this.pages;
	
						 left = this.pages - 4;
					   }
				}
			}
			while (left <= right) {
				ar.push(left);
				left++;
			}
			return ar;
		},
      },
      methods: {
        //跳转分页
		jumpPage: function(page) {
		   var that = this;
		   that .current_page = page;
		   //this.lists(); //执行业务逻辑
		},
		//上一页
		up_current_page:function(){
		    var that = this;
			that .current_page--;
			//this.lists(); //执行业务逻辑
		},
		//下一页
		down_current_page:function(){
		    var that = this;
			that .current_page++;
			//this.lists(); //执行业务逻辑
		},
      },

    })
  </script>