使用axios请求数据，并用vue指令v-for页面显示

野性酷女 2021-09-25 07:18 423阅读 0赞

> 使用axios进行，请求data.json中的数据，再通过vue中的v-for指令将获取的数据进行页面显示

数据源data.json

{
        "success":true,
        "code":20000,
        "message":"成功",
        "data":{
            "items":[
                {"name":"lucy1","age":20},
                {"name":"lucy2","age":30},
                {"name":"lucy3","age":40}
            ]
        }
    }

###  1.先引入vue与axios的js文件 ###

![2021041516332667.png][]

### 2.编写axios的代码格式 ###

一般是固定结构，先初始化定义变量，储存返回对象，再使用axios发送ajax请求，定义方法axios提交方式axios.get("数据源").then(箭头函数).catch(箭头函数)，再在created中调用函数，created方法是在页面渲染之前就执行了。

`箭头函数是没有自己的``this``，在它内部使用的``this``是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例，所以它里面使用的``this``指向vue实例。`

代码中，先将数据获取到数组，再打印到控制台，结果如下，说明已经获取成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70][]

### 3.页面显示数据 ###

利用vue中的指令v-for来进行循环输入到表格中。

<table border="2">
        <tr v-for="users in userList">
            <td>{
       {users.name}}</td>
            <td>{
       {users.age}}</td>
        </tr>
     </table>

结果如下：

![20210415173521224.png][]

[2021041516332667.png]: /images/20210923/73e4c19c0a954e0e9c17498946f8f412.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70]: /images/20210923/d8dcd387b3ae464e81e88a319d19056e.png
[20210415173521224.png]: /images/20210923/d859f61d4a104b33aeddf5aa154ecc56.png