<style>table{width: 600px;margin: 0 auto;text-align: center;border-collapse: collapse; /*合并邊框哦*/}tr th,tr td{border: 1px solid pink;}</style><script src="../vue.js"></script><script src="../axios.js"></script> <div id="app"><table><thead><tr><th>姓名</th> <th>年齡</th> <th>性別</th> <th>工作</th></tr></thead><tbody><tr v-for="item in users"><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.sex}}</td><td>{{item.job}}</td></tr></tbody></table> </div> <script>var vm=new Vue({el:"#app",data:{users:[]}});axios.get("./server.json").then(function (response) {console.log(response.data);//返回的是一個數組vm.users=response.data;}).catch(function (err) {console.log(err)}) </script>

　　

//server.json文件內容{"users": [{"name":"張三", "age": 18, "sex": "男", "job":"web開發"},{"name":"李四", "age": 19, "sex": "女", "job":"UI設計"},{"name":"王五", "age": 20, "sex": "男", "job":"java開發"},{"name":"趙六", "age": 21, "sex": "女", "job":"php開發"}] }

　　

轉載于:https://www.cnblogs.com/IwishIcould/p/10434635.html

總結

以上是生活随笔為你收集整理的axios+vue实现动态渲染员工数据+数据是对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。