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>