Vue结合Ajax实现分页数据获取与展示：下一页与上一页功能全解析

以下是一个使用 Vue 实现上述需求的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <button @click="prevPage">上一页</button> <button @click="nextPage">下一页</button> <ul> <li v-for="item in dataList" :key="item.id">{{ item.name }}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { page: 0, dataList: [] }, methods: { getImages() { axios.get(`https://api.apiopen.top/api/getlmages?page=${this.page}&size=10`) .then(response => { this.dataList = response.data; }) .catch(error => { console.error(error); }); }, nextPage() { if (this.page < 100) { // 假设最多 100 页 this.page++; this.getImages(); } }, prevPage() { if (this.page > 0) { this.page--; this.getImages(); } } }, created() { this.getImages(); } }); </script> </body> </html> ``` 在上述代码中： - `data` 中定义了当前页码 `page` 和数据列表 `dataList` 。 - `getImages` 方法用于发送 Ajax 请求获取数据。 - `nextPage` 方法实现下一页功能，当未超过最大页数时，页码加 1 并重新获取数据。 - `prevPage` 方法实现上一页功能，当页码大于 0 时，页码减 1 并重新获取数据。 - 在 `created` 钩子中初始获取第一页数据。 ######[AI写代码神器 | 570点数解答 | 2024-11-14 14:42:10]

服务商

更多选项

快捷项

自定义