Vue+Ajax+Bootstrap：实现信息列表分页展示

下面是一个使用Vue完成信息列表案例的示例代码： ```html <!DOCTYPE html> <html> <head> <title>信息列表案例</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div id="app"> <h1>信息列表</h1> <div class="container"> <table class="table"> <thead> <tr> <th>ID</th> <th>标题</th> <th>图片</th> </tr> </thead> <tbody v-if="data.length > 0"> <tr v-for="item in data" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.title }}</td> <td><img :src="item.img" alt="图片" width="100"></td> </tr> </tbody> </table> <button class="btn btn-primary" @click="loadNextPage">下一页</button> </div> </div> <script> new Vue({ el: "#app", data: { page: 0, size: 10, data: [] }, created() { this.loadData(); }, methods: { loadData() { const url = `https://api.apiopen.top/api/getlmages?page=${this.page}&size=${this.size}`; $.ajax({ url: url, type: "GET", dataType: "json", success: (response) => { if (response.code === 200) { this.data = response.data; } }, error: (error) => { console.log(error); } }); }, loadNextPage() { this.page++; this.loadData(); } } }); </script> </body> </html> ``` 在上面的代码中，使用Ajax发送请求获取数据，并将获取到的数据绑定到Vue实例的data属性中。然后使用Vue的列表渲染方式将数据展示在页面上。当点击"下一页"按钮时，会调用loadNextPage方法获取下一页数据并更新DOM的渲染。需要注意的是，代码中使用了jQuery库来发送Ajax请求，同时引入了Bootstrap CSS样式库以实现样式的美化。 ######[AI写代码神器 | 1418点数解答 | 2024-11-19 19:26:48]

服务商

更多选项

快捷项

自定义