vue循环渲染接口数据

最新推荐文章于 2023-03-26 19:27:41 发布

zmannn

最新推荐文章于 2023-03-26 19:27:41 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_36956996/article/details/121252844

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js应用中使用axios库从API获取数据，并动态渲染到表格中。通过`v-for`指令，实现了对响应数据中每个对象的遍历，将姓名和电话字段展示在表格的相应列。此示例强调了前端开发中的数据绑定和异步数据处理技巧。

摘要由CSDN通过智能技术生成

vue循环渲染接口数据

app  = new Vue({
            el: '#app',
            data:{
                sites:[]
            },
            mounted(){
              axios.get("url").then(response=>(this.sites=response.data.data))
            },
        });

							<div id="app">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>id</th>
                                            <th>姓名</th>
                                            <th>电话</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="site in sites">
                                            <td>{{site.name}}</td>
                                            <td>{{site.phone}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                        	</div>