<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);//返回的是一個(gè)數(shù)組vm.users=response.data;}).catch(function (err) {console.log(err)}) </script>

　　

//server.json文件內(nèi)容{"users": [{"name":"張三", "age": 18, "sex": "男", "job":"web開(kāi)發(fā)"},{"name":"李四", "age": 19, "sex": "女", "job":"UI設(shè)計(jì)"},{"name":"王五", "age": 20, "sex": "男", "job":"java開(kāi)發(fā)"},{"name":"趙六", "age": 21, "sex": "女", "job":"php開(kāi)發(fā)"}] }

　　

轉(zhuǎn)載于:https://www.cnblogs.com/IwishIcould/p/10434635.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。