在写商品列表的时候，需要将数据分类显示出来,比如套餐类和特色鸡公煲类，图片一可以不一样的，这里就是测试一下
但是数据结构是酱紫的
数组里面放了好多个对象，但是难的是对象里面还放了数组，里面也放了若干对象，现在我们要把foods这个数组里面的name,description,tips显示出来
首先要用v-for得到每个对象得到这个goods.json里的的每个对象，怎么获取呢？下面就是查询数据的的代码块了
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) 打印一下：有七条数据
在html里面用v-for遍历出来，标红的就是关键代码了（我用的是原格式粘贴，这样可以标注关键代码，但是格式就难看一点了。）
<div class="food_wrapper fl"><dl v-for="items in goods"> <!--遍历goods数组-->
<!--外层的name，和菜单栏的每个选项一样的-->
<dt class="category_title"><strong class="category_name" >{{items.name}}</strong></dt>
<!--得到对象里面的foods数组，it 是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">
<!--显示foods里面对象的name-->
<p>{{it.name}}</p>
<!--显示foods里面对象的description-->
<p>{{it.description}}</p>
<!--显示foods里面对象的tips-->
<p>{{it.tips}}</p>
<!--显示foods里面第一个specfoods的priece,数据里面有多个specfoods,也就有多个price,但是值都是一样的，而我们只需要显示一遍-->
<p>{{it.specfoods[0].price}}</p>
</section>
</dd>
</dl>
</div>