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]
},

<p v-for="(item,index) in list">{{item}}-----{{index}}</p>

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

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

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

<p v-for="(user,index) in list">{{user.id}}-----{{user.name}}----{{index}}</p>

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

3. 用v-for遍历对象

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

<div id="container">
	<p v-for="(val,key,index) in user">{{val}}-----{{key}}-----{{index}}</p>
</div>

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

4. 用v-for迭代数字

<div id="container">
	<p v-for="count in 10">这是第{{count}}次循环</p>
</div>

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

Tip

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

<p v-for="(item,index) in users" :key="index">#######</p>

---