当前第2页 返回上一页
1 2 3 4 5 | paginatedData(){
const start = this.pageNumber * this.size,
end = start + this.size;
return this.listData.slice(start, end);
}
|
修改：在一开始我使用 .splice 来复制数组，但更完美的做法是使用 .slice 方法，在这里感谢 Alexander Karelas。
在 template 中：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div>
<ul>
<li v-for="p in paginatedData">
{{p.first}}
{{p.last}}
{{p.suffix}}
</li>
</ul>
<button @click="prevPage">
Previous
</button>
<button @click="nextPage">
Next
</button>
</div>
|
我希望在最开始或者最末尾阻止用户按下按钮，对于 prevPage 按钮，我加入了 :disabled="pageNumber=0" 而对于 nextPage 按钮，我加入 :disabled="pageNumber >= pagecount -1"。
推荐教程：《JS教程》
以上就是在 Vue 中使用分页的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
javascript修改元素内容
vue+iview框架实现左侧动态菜单功能的示例
利用html+css+js实现简单的点赞效果
vue的$router是什么
js如何修改css
带你了解js中[]、{}、()区别（详解）
js如何实现函数防抖与节流
js客户端访问的判断
了解vue中的自定义指令
js中如何判断数据类型
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 在 Vue 中使用分页
