Home >Web Front-end >Vue.js >VUE3 development introductory tutorial: using components to implement paging
VUE3开发入门教程:使用组件实现分页
分页是一个常见的需求,因为在实际开发中,我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中,可以通过使用组件实现分页功能,本文将介绍如何使用组件实现简单的分页功能。
1.创建组件
首先,我们需要创建一个分页组件,使用“vue create”命令创建VUE项目,并在src/components目录下创建Pagination.vue文件。
在Pagination.vue文件中,我们需要声明组件的名称、data数据项、methods方法等。代码如下:
<template> <div> <ul v-if="pages.length"> <li v-if="currentPage !== 1" @click="changePage(currentPage - 1)"><</li> <li v-for="page in pages" :key="page" :class="{'active': page === currentPage}" @click="changePage(page)">{{ page }}</li> <li v-if="currentPage !== totalPage && totalPage > 1" @click="changePage(currentPage + 1)">></li> </ul> </div> </template> <script> export default { name: 'Pagination', data() { return { currentPage: 1, pageSize: 10, totalPage: 0, pages: [] } }, props: { total: { type: Number, default: 0 }, pageSize: { type: Number, default: 10 } }, watch: { total() { this.init() } }, methods: { init() { this.totalPage = Math.ceil(this.total / this.pageSize) this.pages = [] for (let i = 1; i <= this.totalPage; i++) { this.pages.push(i) } }, changePage(page) { if (this.currentPage === page) return this.currentPage = page // 触发自定义事件 this.$emit('page-change', this.currentPage) } }, created() { this.init() } } </script> <style> .pagination { text-align: center; } ul { display: inline-block; padding-left: 0; margin: 0; border-radius: 4px; } li { display: inline; color: #2b2b2b; float: left; width: 30px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #eee; margin-right: 3px; cursor: pointer; } li:hover { background-color: #eee; } .active { background-color: #00a0e9; color: #fff; border: 1px solid #00a0e9; cursor: default; } li:first-child { margin-right: 10px !important; } li:last-child { margin-left: 10px !important; } </style>
在代码中,我们需要实现分页的初始化方法init,以及向外提供分页切换的方法changePage。同时,我们通过watch监听total属性的变化,当total属性变化时,重新调用init方法初始化分页。
2.引入组件
接下来,在我们的组件中使用分页组件。例如,我们在App.vue中引入Pagination组件,并使用v-for指令在模板中循环展示数据,同时监听Pagination组件的page-change自定义事件。
代码如下:
<template> <div class="container"> <ul> <li v-for="item in list" :key="item.id">{{item.text}}</li> </ul> <Pagination :total="total" :page-size="pageSize" @page-change="handlePageChange"/> </div> </template> <script> import Pagination from './components/Pagination' export default { name: 'App', components: { Pagination }, data() { return { total: 100, list: [] } }, methods: { initData() { for (let i = 1; i <= this.total; i++) { this.list.push({ id: i, text: `第 ${i} 条数据` }) } }, handlePageChange(page) { const start = (page - 1) * this.pageSize const end = start + this.pageSize > this.total ? this.total : start + this.pageSize this.list = [] for (let i = start + 1; i <= end; i++) { this.list.push({ id: i, text: `第 ${i} 条数据` }) } } }, created() { this.initData() } } </script> <style> .container { margin: 0 auto; width: 500px; } ul { padding: 0; list-style: none; } li { border: 1px solid #eee; margin-top: 10px; padding: 10px; } </style>
在代码中,我们需要通过计算得到当前页展示的数据范围,并根据范围重新渲染数据列表。
3.运行并测试
最后,在命令行中运行“npm run serve”命令,启动开发服务器,并在浏览器中访问http://localhost:8080/,即可看到页面展示了分页组件和数据列表。你可以尝试在页面上点击分页按钮,观察数据列表是否能够正确地切换页码。
以上就是使用组件实现分页的简单示例,在实际开发中,你可以根据项目的需求对分页组件的样式和属性进行自定义,进一步提升用户体验。
The above is the detailed content of VUE3 development introductory tutorial: using components to implement paging. For more information, please follow other related articles on the PHP Chinese website!