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，我们可以用一个固定字符串拼接数组索引来实现。