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://unpkg.com/vue@3"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h2>图片列表</h2> <button @click="prevPage">上一页</button> <button @click="nextPage">下一页</button> <ul> <li v-for="item in imageData" :key="item.id"> <img :src="item.imageUrl" alt=""> </li> </ul> </div> <script> const app = Vue.createApp({ data() { return { currentPage: 0, imageData: [], }; }, methods: { getImages() { axios.get(`https://api.apiopen.top/api/getlmages?page=${this.currentPage}&size=10`) .then(response => { this.imageData = response.data; }) .catch(error => { console.error(error); }); }, nextPage() { if (this.currentPage < 100) { // 假设最大页数为 100，可根据实际情况修改 this.currentPage++; this.getImages(); } }, prevPage() { if (this.currentPage > 0) { this.currentPage--; this.getImages(); } }, }, created() { this.getImages(); }, }); app.mount('#app'); </script> </body> </html> ``` 在上述代码中： - `currentPage` 用于记录当前页码。 - `getImages` 方法用于发送 AJAX 请求获取数据。 - `nextPage` 方法处理下一页的点击事件，增加页码并获取新数据。 - `prevPage` 方法处理上一页的点击事件，减少页码并获取新数据，当已经是第一页时不做操作。 - 通过 `v-for` 指令渲染获取到的图片数据。 ######[AI写代码神器 | 590点数解答 | 2024-11-15 20:41:14]

服务商

更多选项

快捷项

自定义