使用vue完成信息列表案例 1、使用ajax发送请求获取数据，地址为：https:/api.apiopen.top/a pi/getlmages?page=0&size=10其中参数page为页码（默认从0开始),size为每页数据大小(本案例中可以不用修改)。2、使用bootstrapt.css样式结合vue的列表渲染完成数据的展示。 3、当点击“下一页”按钮时可以继续请求下一页数据并更新dom的渲染。（下一页原理就是请求参数page的值+1，例如当前page=0,那么下一页page=1)。

下面是一个使用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样式库以实现样式的美化。 [2024-11-19 19:26:48 | AI写代码神器 | 1418点数解答]

服务商

更多选项

快捷项

直通车