Vue+AJAX实现图片分页展示：下一页、上一页轻松切换

要实现这个功能，我们需要使用Vue.js来处理数据绑定和DOM渲染，并使用AJAX请求从API获取数据。以下是一个完整的示例代码： HTML部分 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Gallery</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="image in images" :key="image.id"> <img :src="image.url" alt="Image" /> </li> </ul> <button @click="prevPage" :disabled="currentPage === 0">上一页</button> <button @click="nextPage">下一页</button> </div> <script src="app.js"></script> </body> </html> ``` JavaScript部分 (app.js) ```javascript new Vue({ el: '#app', data: { images: [], currentPage: 0, size: 10 }, methods: { fetchData() { const url = `https://api.apiopen.top/api/getimages?page=${this.currentPage}&size=${this.size}`; $.ajax({ url: url, method: 'GET', success: (response) => { this.images = response.data; }, error: (error) => { console.error('Error fetching data:', error); } }); }, nextPage() { this.currentPage++; this.fetchData(); }, prevPage() { if (this.currentPage > 0) { this.currentPage--; this.fetchData(); } } }, created() { this.fetchData(); } }); ``` 解释 1. HTML部分: - 包含一个`<div id="app">`作为Vue实例的挂载点。 - 使用`v-for`指令遍历`images`数组，生成图片列表。 - 两个按钮分别用于“上一页”和“下一页”，并绑定相应的点击事件。 2. JavaScript部分: - 创建一个新的Vue实例，挂载到`#app`元素。 - `data`对象中定义了`images`（存储图片数据）、`currentPage`（当前页码）和`size`（每页大小）。 - `methods`对象中定义了三个方法： - `fetchData`：发送AJAX请求获取数据，并更新`images`数组。 - `nextPage`：增加`currentPage`的值并调用`fetchData`。 - `prevPage`：减少`currentPage`的值并调用`fetchData`，如果已经是第一页则不执行任何操作。 - `created`钩子在实例创建时调用`fetchData`以加载初始数据。这样，当用户点击“下一页”按钮时，会加载下一页的数据并更新DOM；点击“上一页”按钮时，会返回上一页的数据并更新DOM。 ######[AI写代码神器 | 847点数解答 | 2024-11-14 20:59:06]

服务商

更多选项

快捷项

自定义