v-for循环遍历:vue-商品列表查询数据分类显示，json数据格式的解析

以饿了么来举例吧，我们要显示下图画线框里面的食物信息，数据是遍历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）

因为goods里面装的全是对象，所以就可以把“套餐类”和“特色鸡公煲套餐”显示粗来了:

{{items.name}}

重头戏2：遍历foods数组

这就可以将foods数组里面的对象和数组获取到了,显示食物名称，描述，价格，月售

{{it.name}}
   

{{it.description}}

{{it.tips}}

{{it.specfoods[0].price}}

 OK了

下面是全部的html代码:

    
{{items.name}}

 




{{it.name}}
   

{{it.description}}

{{it.tips}}

{{it.specfoods[0].price}}