在Vue中使用分页

data(){ return { pageNumber: 0 // default to page 0 }}

对于 props 来说，数据是必要的，另外我还定义了 size 这个参数来保存每一页数据的数量的最大值。

props:{ listData:{ type:Array, required:true }, size:{ type:Number, required:false, default: 10 }}

在 methods 中，我定义了下一页和上一页的两个方法：

methods:{ nextPage(){ this.pageNumber++; }, prevPage(){ this.pageNumber--; }}

我使用计算属性值来计算一共有多少页：

pageCount(){ let l = this.listData.length, s = this.size; return Math.floor(l/s);}

paginatedData 就是获取过滤后的数据的计算属性：

paginatedData(){ const start = this.pageNumber * this.size, end = start + this.size; return this.listData.slice(start, end);}

修改：在一开始我使用 .splice 来复制数组，但更完美的做法是使用 .slice 方法，在这里感谢 Alexander Karelas。

在 template 中：

我希望在最开始或者最末尾阻止用户按下按钮，对于 prevPage 按钮，我加入了 :disabled=”pageNumber=0″ 而对于 nextPage 按钮，我加入 :disabled=”pageNumber >= pagecount -1″。

推荐教学：《JS教学》