1、v-for遍历数组
<div id="demo">
<ul>
<li v-for="i in names">{{i}}</li>
</ul>
<!-- 使用下标值(索引值) -->
<ul>
<li v-for="(item,index) in names">{{index+1}} : {{item}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#demo',
data: {
message: 'v-for遍历数组',
names:['rocke','jerry','malier','coco'],
}
});
</script>
2、v-for遍历对象
<div id="demo">
<!-- 在遍历对象的时候,只获取一个值,获取的是value -->
<ul>
<li v-for="i in person">{{i}}</li>
</ul>
<hr/>
<!-- 获取key和value时,value在前面,key在后面 -->
<ul>
<li v-for="(value,key) in person">{{key}}:{{value}}</li>
</ul>
<!-- 获取key、value和index -->
<hr>
<ul>
<li v-for="(value,key,index) in person">{{index}}:{{key}}:{{value}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#demo',
data: {
message: '',
person:{
name:'rocke',
age: 22,
height:178,
weight:145,
}
}
});
</script>
3、使用建议
推荐我们在使用v-for的时候,给对应的元素或组件添上一个key属性。
key的作用主要是为了高效的更新虚拟DOM。