在vue中我们可以使用一个指令来迭代数组、对象和数字。这个指令就是强大的v-for
使用v-for最重要的是要搭配“(item,key) in list”的特殊语法,list是需要迭代的对象,item是迭代的匀数组元素别名(你也可以理解为迭代的每一项元素),在data中定义,在普通数组和对象数组中,key是索引。再配合插值表达式来输出结果。
1 迭代普通数组
废话不多说,直接上代码
<div id="app">
<p v-for="(item,key) in list">值:{{item}}-----索引:{{key}}</p>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
list:[1,2,3,4,5]
}
})
</script>
运行结果:
我们可以看到使用v-for迭代普通数组,只需要配合"v-for='(item,key) in list' "的特殊语法就行,要记住,item是每一项的值,也可以理解为迭代数组元素的别名,key是索引值。
2、迭代复杂数组
我们这里说的复杂数组指的是带有对象的数组。
<div id="app">
<p v-for="(item,key) in list">
id:{{item.id}}-----name:{{item.name}}-----索引:{{key}}
</p>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
list:[
{id:1,name:"张三1"},
{id:2,name:"张三2"},
{id:3,name:"张三3"},
{id:4,name:"张三4"},
{id:5,name:"张三5"}
]
},
methods:{
}
})
</script>
运行结果:
如果我们不使用item.id、item.name的形式输出,直接使用item的形式,那么会发生什么呢?
<div id="app">
<p v-for="(item,key) in list">
{{item}}-----索引:{{key}}
</p>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
list:[
{id:1,name:"张三1"},
{id:2,name:"张三2"},
{id:3,name:"张三3"},
{id:4,name:"张三4"},
{id:5,name:"张三5"}
]
},
methods:{
}
})
</script>
运行结果:
我们可以看到,在复杂数组中,item代表的是每一项被迭代元素的值,我们需要将复杂数组中的对象输出,那么就需要用到"item.id"的形式将对象输出,否则直接使用item输出会不太标准。
3、迭代对象
我们还可以使用v-for迭代对象
<div id="app">
<p v-for="(item,key,index) in listObj">{{item}}----{{key}}----{{index}}</p>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
listObj:{
id:1,
age:18,
name:"张山"
}
},
methods:{
}
})
</script>
运行结果:
我们可以看到,使用v-for迭代对象时,我们配合"(item,key,index) in listObj"来迭代对象,我们都知道在对象中是用键值对来表示,item表示的就是值,key表示的是键,index表示的是索引。
4、迭代普通数字
在vue中迭代普通数字简直不要太简单。
<div id="app">
<p v-for="(i,key) in 5">{{i}}---索引:{{key}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
}
},
methods:{
}
})
</script>
运行结果:
我们可以看到,和迭代普通数组、复杂数组不同的是,迭代普通数组,只需要将迭代对象名称改为需要迭代的数字即可。
5、总结
迭代普通数组:v-for="(item,key) in list"-------item为迭代的元素,key为索引,list为迭代的对象
迭代特殊数组:v-for="(item,key) in list"-------item为迭代的每一项,可以为索引,list为迭代的对 象,输出需要"item.id"的形式
迭代对象:v-for="(item,key,index) in list"-----item为值,key为键,index为索引,list为迭代的对 象
迭代数字:v-for="item in number"-------------------item为数字的每一项,number为需要迭代的数字
上述的item和key以及index名称都是可更改的。