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
  } 
})

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

Logo

前往低代码交流专区

更多推荐