使用axios请求数据,并用vue指令v-for页面显示
使用axios进行,请求data.json中的数据,再通过vue中的v-for指令将获取的数据进行页面显示1.先引入vue与axios的js文件<script src="vue.min.js"></script><script src="axios.min.js"></script>2.编写axios的代码格式一般是固定结构,先初始化定义变量,储存返
·
使用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文件
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
2.编写axios的代码格式
一般是固定结构,先初始化定义变量,储存返回对象,再使用axios发送ajax请求,定义方法axios提交方式axios.get("数据源").then(箭头函数).catch(箭头函数),再在created中调用函数,created方法是在页面渲染之前就执行了。
<script>
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方法
}
}
})
</script>
箭头函数是没有自己的
this
,在它内部使用的
this
是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例,所以它里面使用的
this
指向vue实例。
代码中,先将数据获取到数组,再打印到控制台,结果如下,说明已经获取成功
3.页面显示数据
利用vue中的指令v-for来进行循环输入到表格中。
<table border="2">
<tr v-for="users in userList">
<td>{{users.name}}</td>
<td>{{users.age}}</td>
</tr>
</table>
结果如下:
更多推荐
已为社区贡献2条内容
所有评论(0)