Vue 结合 Ajax 实现分页图片数据展示：完整 HTML 代码示例

以下是一个使用 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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="app"> <h2>图片列表</h2> <button @click="prevPage" :disabled="currentPage === 0">上一页</button> <button @click="nextPage">下一页</button> <ul> <li v-for="item in imageData" :key="item.id">{{ item.name }}</li> </ul> </div> <script> const app = Vue.createApp({ data() { return { currentPage: 0, imageData: [], }; }, methods: { fetchData() { $.ajax({ url: `https://api.apiopen.top/api/getlmages?page=${this.currentPage}&size=10`, success: (data) => { this.imageData = data; }, }); }, nextPage() { this.currentPage++; this.fetchData(); }, prevPage() { if (this.currentPage > 0) { this.currentPage--; this.fetchData(); } }, }, created() { this.fetchData(); }, }); app.mount('#app'); </script> </body> </html> ``` 在上述代码中，使用 `Vue` 进行数据管理和页面交互，通过 `Ajax` 获取数据并更新页面展示。注意，实际使用时请确保 `https://api.apiopen.top/api/getlmages` 接口的可用性以及返回数据的格式符合预期。 ######[AI写代码神器 | 507点数解答 | 2024-11-16 20:50:48]

服务商

更多选项

快捷项

自定义