"本文介绍了如何在Vue应用中使用axios库进行异步数据请求，并展示了如何将从"data.json"获取的JSON数据动态填充到表格中。重点在于结合Vue的生命周期方法和axios进行AJAX请求的实际操作。"
**
axios.min.js相当于ajax的异步请求,经常同vue使用
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1">
<tr v-for="user in memberList">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<!-- axios.min.js相当于ajax的异步请求,经常同vue使用 -->
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {//在data定义变量和初始化
memberList: []//初始数值 空数组
},
created() {//界面渲染之前执行
//调用定义的方法
this.getList()
},
methods: {//编写具体的方法
getList(id) {
//vm = this
axios.get('data.json')
.then(response => {//执行成功执行
this.memberList = response.data.data.items
console.log(this.memberList)
})
.catch(error => {//执行失败执行
console.log(error)
})
}
}
})
</script>
</body>
</html>
异步请求的Ajax JSON数据 data.json
{
"sucess":true,
"code":20000,
"message":"成功",
"data":{
"items":[
{"name":"王文龙1","age":20},
{"name":"王文龙2","age":20},
{"name":"王文龙3","age":20}
]
}
}
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
