Vue入门教程--v-for循环属性详解（article:7）

Vue.js 初步入门

---

属性介绍

v-for ：用来对元素、对象等进行遍历的属性

使用详解

1. v-for

v-for

1. 用v-for遍历简单数组

data:{
	list:[1,2,3,4,5,6]
},

{{item}}-----{{index}}

其中，list是数据集，item是遍历数据集的一个自定义变量，index是遍历到每一项的下标。

2. 用v-for遍历复杂数组

data:{
	list:[{id:1,name:'zs'},{id:2,name:'ls'},{id:3,name:'ww'}]
}

{{user.id}}-----{{user.name}}----{{index}}

遍历对象数组，可以分别取出单个对象的属性值：

3. 用v-for遍历对象

data:{
	user:{
		id:1,
		name:'张三',
		gender:'男'
	}
}

	
{{val}}-----{{key}}-----{{index}}

可以用键值对形式分别取出对象的属性和属性值。

4. 用v-for迭代数字

	
这是第{{count}}次循环

注意的是，迭代数字，输出的count值会从1开始。

Tip

在新版本中，组件中使用v-for循环，key是必须的，也是唯一的，且key值之只能string/number类型.

#######

---