| 使用axios请求数据，并用vue指令v | 您所在的位置：网站首页 › ajax接收返回的数据并显示出来怎么回事 › 使用axios请求数据，并用vue指令v |
使用axios请求数据，并用vue指令v
|
使用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文件
一般是固定结构，先初始化定义变量，储存返回对象，再使用axios发送ajax请求，定义方法axios提交方式axios.get("数据源").then(箭头函数).catch(箭头函数)，再在created中调用函数，created方法是在页面渲染之前就执行了。 new Vue({ el: '#app', //固定结构 data: {//在data定义变量和初始值 //1.定义变量初始值，指空数组 userList:[] }, created(){//页面渲染之前执行，调用定义的方法 //3.调用定义的方法 this.getUserList() }, methods:{//编写具体的方法 getUserList(){ //2.使用axios发送ajax请求 //axios.提交方式(“请求s接口路径”).then(箭头函数).catch(箭头函数|) axios.get("data.json") .then(response=>{ //response就是请求后返回的数据，response可以任意取名 // console.log(response) //通过response获取具体数据，赋值给定义空数组 this.userList=response.data.data.items console.log(this.userList) })//请求成功执行then方法 .catch(error=>{ })//请求失败执行catch方法 } } })箭头函数是没有自己的this，在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例，所以它里面使用的this指向vue实例。 代码中，先将数据获取到数组，再打印到控制台，结果如下，说明已经获取成功
3.页面显示数据 利用vue中的指令v-for来进行循环输入到表格中。 {{users.name}} {{users.age}}结果如下：
|
【本文地址】
公司简介
联系我们