在Vue.js中，我們經(jīng)常會(huì)用到ajax請(qǐng)求來(lái)獲取數(shù)據(jù)，一般返回的是對(duì)象或數(shù)組等數(shù)據(jù)結(jié)構(gòu)。其中，數(shù)組的使用在實(shí)際開(kāi)發(fā)中非常常見(jiàn)，下面就讓我們來(lái)探討一下如何在Vue.js中使用ajax獲取并使用數(shù)組數(shù)據(jù)。

首先，在Vue.js中要使用ajax請(qǐng)求，我們需要先引用axios或其他ajax請(qǐng)求庫(kù)。這里以axios為例，示范如何獲取遠(yuǎn)程的一個(gè)JSON數(shù)組：

axios.get('/api/data.json')
.then(response =>{
// response.data為遠(yuǎn)程獲取的JSON數(shù)組
})
.catch(error =>{
console.log(error);
});

獲取到數(shù)組數(shù)據(jù)后，我們可以將其存儲(chǔ)到Vue.data中，然后在模板中渲染。假設(shè)我們要渲染一個(gè)簡(jiǎn)單的表格，其中每一行為數(shù)組中的一個(gè)對(duì)象：

ID
Name
Age
{{ item.id }}
{{ item.name }}
{{ item.age }}

其中，v-for指令用來(lái)循環(huán)渲染表格行。在實(shí)例中，我們可以這樣將獲取到的遠(yuǎn)程數(shù)組存儲(chǔ)到Vue.data中：

new Vue({
el: '#app',
data: {
list: []
},
mounted() {
axios.get('/api/data.json')
.then(response =>{
this.list = response.data;
})
.catch(error =>{
console.log(error);
});
}
});

在mounted生命周期中，我們調(diào)用ajax請(qǐng)求獲取遠(yuǎn)程數(shù)據(jù)，并將其存儲(chǔ)到Vue.data中的list屬性中。由于Vue的數(shù)據(jù)響應(yīng)式特性，當(dāng)list改變時(shí)，模板中的表格也會(huì)自動(dòng)刷新。