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"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in dataList" :key="item.id">{{ item.name }}</li> </ul> <button @click="prevPage">上一页</button> <button @click="nextPage">下一页</button> </div> <script> var app = new Vue({ el: '#app', data: { page: 0, size: 10, dataList: [] }, methods: { getData() { axios.get(`https://api.apiopen.top/api/getlmages?page=${this.page}&size=${this.size}`) .then(response => { this.dataList = response.data; }) .catch(error => { console.error(error); }); }, nextPage() { if (this.page < 100) { // 假设最大页码为 100 以防止无限请求 this.page++; this.getData(); } }, prevPage() { if (this.page > 0) { this.page--; this.getData(); } } }, created() { this.getData(); } }); </script> </body> </html> ``` 在上述代码中，我们首先在 `created` 钩子函数中获取第一页数据。然后通过 `nextPage` 和 `prevPage` 方法来处理下一页和上一页的逻辑，并在点击按钮时更新数据。上述代码中的接口地址可能需要根据实际情况进行修改，并且还需要处理数据的具体结构来正确渲染列表。 ######[AI写代码神器 | 544点数解答 | 2024-11-16 23:01:31]

服务商

更多选项

快捷项

自定义