1、使用ajax发送请求获取数据,地址为:https://api.apiopen.top/api/getlmages? page=0&size=10其中参数page为页码(默认从0开始),size为每页数据大小(本案例中可以不用修改)。 2、使用vue的列表渲染完成数据的展示。 3、当点击“下一页”按钮时可以继续请求下一页数据并更新dom的渲染。(下一页原理就是请求参数page的值+1,例如当前page=0,那么下一页page=1)。 4、当点击“上一页”按钮时可以返回上一页,如果已经是第一页,则按上一页没有任何反应。

以下是一个使用 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` 方法获取初始数据。当点击上一页或下一页按钮时，更新页码并重新获取数据。 [2024-11-14 08:42:51 | AI写代码神器 | 518点数解答]

服务商

更多选项

快捷项