沒有使用後端接口，自己用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>
顯示效果：
