在Web開(kāi)發(fā)中，經(jīng)常需要將數(shù)據(jù)以JSON格式進(jìn)行傳輸。而JSON的數(shù)組類型數(shù)據(jù)是一種很常見(jiàn)的數(shù)據(jù)類型，因此在Vue中遍歷JSON數(shù)組也是開(kāi)發(fā)中經(jīng)常需要處理的問(wèn)題。下面將介紹如何使用Vue對(duì)JSON數(shù)組進(jìn)行遍歷和渲染。

// 假設(shè)JSON數(shù)組數(shù)據(jù)如下
var goodsList = [
{ id: 1, name: '商品1', price: 10 },
{ id: 2, name: '商品2', price: 20 },
{ id: 3, name: '商品3', price: 30 }
];

在Vue中，如果需要對(duì)JSON數(shù)組進(jìn)行遍歷，有兩種方法可以實(shí)現(xiàn)。

方法一：使用v-for指令

Vue提供了v-for指令，通過(guò)它可以對(duì)數(shù)組對(duì)象進(jìn)行遍歷。在v-for指令中，需要使用指定的數(shù)據(jù)對(duì)象和別名，例如：

{{ goods.name }} - {{ goods.price }}

在上面的代碼中，v-for指令將會(huì)循環(huán)遍歷goodsList數(shù)組，并為其生成一個(gè)包含商品名和價(jià)格的列表。

方法二：使用computed計(jì)算屬性

另一種處理JSON數(shù)組的方法是使用Vue的computed計(jì)算屬性。computed計(jì)算屬性可以將數(shù)據(jù)處理后返回一個(gè)新的數(shù)組，然后在模板中直接使用即可。

{{ goods.name }} - {{ goods.price }}
computed: {
newGoodsList: function() {
return this.goodsList.map(function(goods) {
// 價(jià)格乘以2
goods.price = goods.price * 2;
return goods;
});
}
}

在上面的代碼中，我們通過(guò)Vue的map方法對(duì)goodsList數(shù)組進(jìn)行遍歷，并乘以2返回新的數(shù)組newGoodsList，在模板中使用newGoodsList即可。

以上就是Vue中處理JSON數(shù)組的兩種方法。兩種方法各有優(yōu)缺點(diǎn)，具體使用時(shí)要視情況而定。