【data.json文件】
[
{"name": "张三", "age":11, "gender": "女"},
{"name": "李四", "age":12, "gender": "男"},
{"name": "王五", "age":13, "gender": "女"}
]
【axios.html文件】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>axios使用,axios发送请求获取异步数据</title>
<!-- 引入vue.js和axios.js文件 -->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
</head>
<!--
1.从数据文件中加载数据（项目目录下创建一个数据文件data.json，存入数据）
2.Vue实例中用钩子函数created初始化加载数据
-->
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users" :key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
users:[]
},
/*------------------------------------------------*/
/* /!*例子1、加载成功执行then（），失败执行catch（）*!/
created() { /!*钩子函数created初始化加载数据*!/
axios({
url:"data.json",
method:"get"
}).then(res=>{ /!*成功执行then*!/
console.log(res); /!*axios返回的数据有5个属性，data属性存放数据*!/
app.users=res.data; /!*数据赋值到users*!/
}).catch(err=>{ /!*失败执行catch*!/
alert(err)});
}*/
/*-------------------------------------------------*/
/*例子2 使用get方式*/
created() {
axios.get("data.json").then(res=>{
console.log(res);
app.users=res.data;
}).catch(err=>{
alert(err)});
}
/*---------------------------------------------------*/
})
</script>
</body>
</html>
7049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
