v-for遍历数组和遍历对象的区别

一、遍历数组

只有两个变量：

1. item ：指数组内元素的内容
2. index ：指数组的下标，从0开始

二、遍历对象

只有三个变量：

1. value ：指对象的内容，就是属性值
2. key ：指对象中的“键名”，就是那个属性名
3. index ：指对象的下标，从0开始

三、例子

（一）遍历对象

部分代码：

tableHead是一个对象

tableHead:{
	data:'日期',
	goodsname:'物品名称',
    price:'销售单价',
    amount:'购买数量',
    total:'该项总价'
}

遍历tableHead

<td v-for="(value,key,index) in tableHead"></td>

1. value ：
   日期、
   物品名称、
   销售单价 等……
2. key ：
   data、
   goodsname、
   price 等……
3. index ：
   0、1、2、3、4

（二）遍历数组内对象

部分代码：

tableBody是一个数组

tableBody:[
	{
	  data:'21/05/01',
	  goodsname:'玫瑰花茶',
	  price:'66/1斤',
	  amount:'4斤',
	  total:'264'
	},
	{
	  data:'21/05/02',
	  goodsname:'菊花茶',
	  price:'44/1斤',
	  amount:'2斤',
	  total:'88'
	},
	{
	  data:'21/05/03',
	  goodsname:'荞麦茶',
	  price:'55/1斤',
	  amount:'5斤',
	  total:'275'
	},{
	  data:'21/05/04',
	  goodsname:'茉莉茶',
	  price:'77/1斤',
	  amount:'3斤',
	  total:'231'
	}
]

遍历tableBody

<tr v-for="(item,index1) in tableBody">
	<td v-for="(value2,key2,index2) in tableHead"></td>
</tr>

1. item ：
   {data:‘21/05/01’,
   goodsname:‘玫瑰花茶’,
   price:‘66/1斤’,
   amount:‘4斤’,
   total:‘264’} 和
   {data:‘21/05/02’,
   goodsname:‘菊花茶’,
   price:‘44/1斤’,
   amount:‘2斤’,
   total:‘88’} 等……
2. index1 ：
   0、1、2、3、4
3. value2 ：
   21/05/01、
   玫瑰花茶、
   66/1斤、
   4斤、
   264 等……
4. key2 ：
   data、
   goodsname、
   price、
   amount、
   total 等……
5. index2 ：
   0、1、2、3、4

注意：以上仅为个人学习过程中的理解，仅为参考。

标签：遍历,price,amount,vue,数组,goodsname,total,data
来源： https://blog.csdn.net/weixin_49084149/article/details/117925262