其他分享
首页 > 其他分享> > vue v-for遍历数组和遍历对象的区别

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

作者:互联网

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