axios+vue??????????????????????????????+???????????????

Posted 2021-02-11

?????????v-for   style   ??????   margin   data   rip   ??????   pre   ??????   

 <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??????"}
  ]
}

??????