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>