axios+vue实现动态渲染员工数据+数据是对象

 <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开发"}
  ]
}