没有使用后端接口,自己用json模拟的:
{
"success":"true",
"code":"200",
"message":"成功",
"data":{
"users":[
{"name":"Lucy","age":21},
{"name":"Tom","age":13},
{"name":"Jim","age":27},
{"name":"Lili","age":41}
]
}
}
html代码:
<!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">
<ul>
<li v-for="(item,index) in userList">{{item}}--{{index}}</li>
</ul>
</div>
<script src="../vue.min.js"></script>
<script src="../axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: []
},
created(){//页面渲染之前执行,一般用于数据的获取
//调用定义的方法
this.getData();//此处没有‘this’会寻找不到相应的方法
},
methods: {//编写具体的方法以供调用
getData(){
//使用axios发送ajax请求
//axios。提交方式("请求接口路径").then().catch()
axios.get("./data/data.json")
//请求成功调用then()方法,有形参为响应对象
.then(response => {
console.log(response.data.data.users);
console.log(JSON.stringify(response.data.data.users));
this.userList = response.data.data.users;//此处没有‘this’会无法进行数据赋值
})
//请求失败调用catch()方法,有形参为错误对象
.catch(err => {
console.log(err);
})
}
}
})
</script>
</body>
</html>
显示效果: