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"> <div v-if="images.length > 0"> <img :src="currentImage" alt="Gallery Image" style="width: 100%; max-width: 600px; height: auto;"> </div> <button @click="prevPage" :disabled="page === 0">上一页</button> <button @click="nextPage">下一页</button> </div> <script src="app.js"></script> </body> </html> ``` JavaScript部分 (app.js) ```javascript new Vue({ el: '#app', data: { page: 0, size: 10, images: [], currentImageIndex: 0, }, computed: { currentImage() { if (this.images.length > 0) { return this.images[this.currentImageIndex].url; } return ''; } }, methods: { fetchData() { const url = `https://api.apiopen.top/api/getimages?page=${this.page}&size=${this.size}`; $.ajax({ url: url, method: 'GET', success: (response) => { this.images = response.data; this.currentImageIndex = 0; // Reset to the first image of the new page }, error: (error) => { console.error('Error fetching data:', error); } }); }, nextPage() { this.page++; this.fetchData(); }, prevPage() { if (this.page > 0) { this.page--; this.fetchData(); } } }, created() { this.fetchData(); // Fetch initial data when the component is created } }); ``` 解释 1. HTML部分: - 包含一个`div`元素作为Vue实例的挂载点。 - 使用`v-if`指令来确保只有在有图片时才显示图片。 - 两个按钮分别用于“上一页”和“下一页”，并使用`@click`事件监听器来调用相应的方法。 - 使用`:disabled`属性来禁用“上一页”按钮当页码为0时。 2. JavaScript部分: - 创建一个新的Vue实例，挂载到`#app`元素。 - `data`对象中定义了`page`, `size`, `images`, 和 `currentImageIndex`。 - `computed`属性`currentImage`根据当前的图片索引返回当前图片的URL。 - `methods`对象中定义了`fetchData`, `nextPage`, 和 `prevPage`方法。 - `fetchData`方法使用jQuery的`$.ajax`函数发送GET请求获取数据，并更新`images`数组。 - `nextPage`方法增加页码并调用`fetchData`方法。 - `prevPage`方法减少页码（如果大于0）并调用`fetchData`方法。 - `created`生命周期钩子在组件创建时调用`fetchData`方法以获取初始数据。这样，每次点击“下一页”或“上一页”按钮时，都会重新请求数据并更新页面上的图像。 ######[AI写代码神器 | 987点数解答 | 2024-11-14 20:45:38]

服务商

更多选项

快捷项

自定义