',  data:function(){return{  mypagesize:10,  mypageCurrent:1,  sortparam:"",  sorttype:1,  }},  //计算属性  computed:{  // 分页大小 获取的时候显示父级传入的，修改的时候修改自身的。子组件不能修改父元素的值  pagesize:{  get:function(){  return this.pagerData.page.pagesize;  },  set:function(value){  this.mypagesize = value;  }  },  pageCurrent:{  get:function(){  return this.pagerData.page.pageCurrent;  },  set:function(value){  this.mypageCurrent = value;  }  },  startData:function(){  return this.pagerData.page.pagesize*(this.pagerData.page.pageCurrent-1)+1;  },  endData:function(){  var max =this.pagerData.page.pagesize*this.pagerData.page.pageCurrent;  return max>this.pagerData.page.totalCount?this.pagerData.page.totalCount:max;  }  },  methods:{  showPage: function (pageIndex, $event) {   if (pageIndex > 0) {   if(pageIndex>this.pagerData.page.pageCount) pageIndex = this.page.pageCount;   this.$emit('show-page',{pageCurrent:pageIndex,pagesize:this.mypagesize});//事件   }  },sortBy: function (sortparam) {   this.sortparam = sortparam;   this.sorttype = this.sorttype == -1 ? 1 : -1;  }  } }

关于使用vue.js组件怎么实现一个分页效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

标题名称：使用vue.js组件怎么实现一个分页效果
新闻来源：http://dzwzjz.com/article/gopdpi.html