Vue3 语法糖实现分页查询 - 简洁高效的分页功能

"在 Vue3 中，可以使用computed属性和watch监听器来实现分页查询的语法糖。\n\n首先，需要在 Vue 组件中定义分页相关的数据，例如：\nvue\n<script>\nexport default {\n data() {\n return {\n currentPage: 1, // 当前页码\n pageSize: 10, // 每页显示的条数\n total: 0, // 总条数\n dataList: [] // 数据列表\n }\n },\n computed: {\n totalPages() { // 总页数\n return Math.ceil(this.total / this.pageSize)\n }\n },\n watch: {\n currentPage(newPage) { // 当前页码变化时执行查询\n this.fetchData(newPage)\n }\n },\n methods: {\n fetchData(page) { // 查询数据的方法\n // 根据当前页码和每页显示的条数，发送分页查询请求\n // 将查询结果赋值给dataList和total\n }\n }\n}\n</script>\n\n\n然后，在模板中可以使用分页器和数据列表展示数据，例如：\nvue\n<template>\n <div>\n <ul>\n <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>\n </ul>\n <div>\n <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>\n <span>{{ currentPage }} / {{ totalPages }}</span>\n <button @click="currentPage++" :disabled="currentPage === totalPages">下一页</button>\n </div>\n </div>\n</template>\n\n\n这样，当点击上一页或下一页按钮时，会自动更新currentPage的值，从而触发watch监听器，执行查询数据的方法fetchData。同时，模板中的上一页和下一页按钮会根据currentPage的值来禁用或启用。\n