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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="app"> <button @click="prevPage" :disabled="currentPage === 0">上一页</button> <button @click="nextPage">下一页</button> <ul> <li v-for="item in dataList" :key="item.id">{{ item.name }}</li> </ul> </div> <script> const app = Vue.createApp({ data() { return { currentPage: 0, dataList: [], }; }, methods: { getData() { $.ajax({ url: `https://api.apiopen.top/api/getlmages?page=${this.currentPage}&size=10`, success: (response) => { this.dataList = response.data; } }); }, prevPage() { if (this.currentPage > 0) { this.currentPage--; this.getData(); } }, nextPage() { this.currentPage++; this.getData(); } }, created() { this.getData(); } }); app.mount('#app'); </script> </body> </html> ``` 在上述代码中，我们首先在 `data` 中定义了当前页码 `currentPage` 和数据列表 `dataList`。在 `methods` 中定义了获取数据的方法 `getData`，以及上一页和下一页的方法。在创建实例时调用 `getData` 方法获取初始数据。当点击上一页或下一页按钮时，更新页码并重新获取数据。 ######[AI写代码神器 | 518点数解答 | 2024-11-14 08:42:51]

服务商

更多选项

快捷项

自定义