v-for遍历数组和对象

vue初学者在使用v-for属性时可能不能区分数组遍历和对象的遍历，这里做一个记录：

v-for指令是用来遍历 数组、对象以及整数的，下面依次讲解

1. 遍历数组

      v-for最常用的可能就是用来遍历数组，接受两个参数（item, index），item为遍历出的每组数据，index为每组数据的索引，可做唯一标识

<div id="demo"
  <el-span v-for="(item, index) in array" :key="index">
    {{index}}: {{item}}
  </el-span>
</div>

new Vue({
  el: '#demo',
  data: {
    array: [
      'red',
      'green',
      'pink'
    ]
  } 
})

      2.遍历对象

       v-for遍历对象可接受三个参数（value, key, index），value为每个对象的value值，key为key值，index为索引

<div id="demo"
  <el-span v-for="(value, key, index) in objectDemo" :key="index">
    {{index}}: {{item}}: {{value}}
  </el-span>
</div>

new Vue({
  el: '#demo',
  data: {
    objectDemo: {
      color: '#ffffff',
      size: '20px',
      background: '#000000'
    }
  } 
})

    3.遍历整数

     如下，遍历整数会一次打印出1，2，3，4，5

<div id="demo"
  <el-span v-for="num in nums" :key="num">
    {{num}}
  </el-span>
</div>

new Vue({
  el: '#demo',
  data: {
    nums: 5
  } 
})

小伙伴如果有疑问可以第一时间评论或留言，看到后也会及时回复的，有帮助的麻烦动动手指点个赞哟！