v-for的使用
v-for的使用
v-for
一般是对数组或者对象属性的迭代,常用在列表渲染。
代码:
<template>
<div>
<ul>
<li v-for="item,index in items">
{{index}} - {{ item.message }}
</li>
</ul>
<ul>
<li v-for="item,index in items" :key="index">
{{index}} - {{ item.message }}
</li>
</ul>
<ul>
<li v-for="value,key,index in items2">
{{key}} - {{ value }} - {{index}}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
items: [
{ message: 'aaa' },
{ message: 'bbb' },
{ message: 'ccc' }
],
items2: {
a:'111',
b:'222',
c:'333'
}
}
}
}
</script>
<style>
</style>
这样就能把items数组或者items2对象中的数据遍历出来。需要注意的是vue为了提升性能,会复用已经存在的元素。如果你不想让vue复用已经存在的元素,你可以为元素绑定一个key,key必须是唯一的。有时候我们的数据没有唯一Id,我们可以用一个固定字符串拼接数组索引来实现。
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。