以餓了麼來舉例吧，我們要顯示下圖畫線框裡面的食物資訊，資料是遍歷json資料出來的，

json資料在呢？結構是醬紫的數組裡面放了多個物件。物件裡面放了陣列的同時又放了若干物件，我們要實現上圖的效果（將套餐類，特色雞公煲套餐分類顯示），就要把foods這個數組裡面的name,description,tips顯示出來

怎麼做呢？

首先要用v-for得到goods.json裡的每個物件，把它存到goods: [],陣列中並返回。下面就是查詢資料的的程式碼塊了

		data() {
			return {
				goods: [],
			}
		},
		
		created() {
			this.goodsList();

		},
		methods: {
			goodsList() {
				var tempList = [];
				var self = this;
				this.http.get('static/goods.json').then(function(response) {
					self.goods = response.data;
					console.log(self.goods)

				}).catch(function(error) {
					console.log(error);
				})

			}

		}
 

console.log(self.goods) 列印一下：有7條資料

然後，將這些資料通過htm標籤拼接顯示出來就好了，棒棒噠~~

。。。。。。。。。

吃瓜的：額，不對吧，這就顯示了？有點太容易了吧。。。

吃瓜的：資料沒解析完全吧？

吃瓜的。。。。

我：額。。。我去HTML裡面繼續解析。。

吃瓜的：吐血中。。。

接下來是我們切換下片場，來到HTML。。。

重頭戲1：遍歷goods陣列，獲取物件（上面剛剛返回出來了goods）

<dl v-for="items in goods">    <!--遍歷goods陣列-->

因為goods裡面裝的全是物件，所以就可以把“套餐類”和“特色雞公煲套餐”顯示粗來了:

<dt class="category_title"><strong class="category_name" >{{items.name}}</strong></dt>

重頭戲2：遍歷foods陣列

<dd class="fooddetails_root clearfix" v-for="it in items.foods"> 

這就可以將foods數組裡面的物件和陣列獲取到了,顯示食物名稱，描述，價格，月售

<!--顯示食物名稱-->
<p>{{it.name}}</p>   
<!--顯示食物評價-->
<p>{{it.description}}</p>
<!--顯示食物月售幾份-->
<p>{{it.tips}}</p>
<!--食物價格-->
<p>{{it.specfoods[0].price}}</p>
 

 OK了

下面是全部的html程式碼:

<div class="food_wrapper fl">
<dl v-for="items in goods">    <!--遍歷goods陣列-->
<dt class="category_title"><strong class="category_name" >{{items.name}}</strong></dt>
<!--得到物件裡面的foods陣列-->
<dd class="fooddetails_root clearfix" v-for="it in items.foods"> 
<!--顯示圖片-->
<span class="img_logo fl" style="height: 71px;"><img :src="it.image_path" alt="" /></span>
<section class="fooddetails_info fl">
<!--顯示食物名稱-->
<p>{{it.name}}</p>   
<!--顯示食物評價-->
<p>{{it.description}}</p>
<!--顯示食物月售幾份-->
<p>{{it.tips}}</p>
<!--食物價格-->
<p>{{it.specfoods[0].price}}</p>


</section>
</dd>
</dl>


</div>