如果你在进行 Vue.js 的开发，你很有可能需要让用户查看分页列表。这是一个非常基本的需求，比如显示某个博客的列表、显示产品目录等等。在这篇文章中，我们将会讲解如何使用 Vue.js 来实现分页列表。
简介
分页列表通常基于某个数据库或者 API 的请求结果。我们会将请求结果存到一个数组中，然后使用分页来限制每个页面所显示的项目数量，这样就可以给用户更好的浏览体验。
在 Vue.js 中，我们通常会将请求放到一个组件的 created() 生命周期中，然后将请求结果绑定到组件实例的一个数据属性中。这样就可以在模板中使用这些数据了。
实现分页
首先，我们需要在模板中渲染请求结果，就像这样：
<div v-for="item in items">{{ item }}</div>
现在我们通过 computed 属性来计算出分页所需要的属性。我们需要知道当前总共有多少条数据，总共有多少页，当前所在的页码等等。下面是一个例子：
-- -------------------- ---- ------- --------- - ----------- - ------ --------------------------- - --------------- -- --------------- - ----- ----- - ----------------- - -- - -------------- ----- --- - ----- - -------------- ------ ----------------------- ----- - -展开代码
我们使用了 Math.ceil() 将数据总数除以每页数量向上取整得到总页数。我们还定义了 paginatedData() 计算属性，根据当前页码和每页数量计算得到要展示的数据。
接下来，我们需要在模板中渲染分页器。我们使用一个 v-for 指令来循环展示页码标签。注意，我们使用了 v-if 属性来限制页码数量。因为不可能对于大量的数据展示大量的页码，这会影响用户使用体验。
<div v-for="n in Math.min(pageCount, maxPageButtons)" :key="n"> <button v-if="currentPage === n">{{ n }}</button> <button v-else @click="currentPage = n">{{ n }}</button> </div>
最后，我们需要在组件的 data 属性中增加一些状态属性，包括每页展示数据数量、当前页码等等。我们还需要为分页按钮设置一个最大数量，以便于适应各种情况。
data() { return { items: [], // 要分页展示的数据 pageSize: 10, // 每页展示数据数量 currentPage: 1, // 当前页码 maxPageButtons: 7 // 分页器最多显示按钮数量 }; }
现在我们已经实现了一个简单的分页器，下面是完整的代码示例：
-- -------------------- ---- ------- ---------- ----- ---- ----------- -- -------------- -------------- ---- -------- ---- -------- -- ------------------- ---------------- --------- ------- ----------------- --- ----- - ----------- ------- ------ ------------------- - ----- - ----------- ------ ------ ----------- -------- ------ ------- - ------ - ------ - ------ --- --------- --- ------------ -- --------------- - -- -- --------- - ----------- - ------ --------------------------- - --------------- -- --------------- - ----- ----- - ----------------- - -- - -------------- ----- --- - ----- - -------------- ------ ----------------------- ----- - - -- ---------展开代码
结语
这篇文章介绍了如何使用 Vue.js 实现分页列表功能。通过使用 computed 属性和 v-for 指令，我们成功实现了一个简单的分页器。但实现一个良好的分页器还需要考虑到更多的用户交互和数据条件，我们需要结合业务需求进行更多优化处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c4011070d6986a6723252b
