我们使用vue,在对一组数组列表进行渲染的时,会使用到 v-for 指令。
v-for 指令使用 item in items 形式语法,items是源数据数组, item 是数组元素迭代的别名。

 <ul>
  <li v-for="item in items">
    {{ item.name}}
  </li>
</ul>

 data: {
    items: [
      { name: 'Foo' },
      { name: 'Bar' }
    ]
  }

结果:
在这里插入图片描述

v-for 还可以增加一个可选的第二个参数,为当前项的索引。

<ul>
  <li v-for="(item, index) in items">
	 {{ index }} - {{ item.name}}
  </li>
</ul>

 data: {
    items: [
      { name: 'Foo' },
      { name: 'Bar' }
    ]
  }
  

结果:
在这里插入图片描述

你也可以用 v-for 通过一个对象的属性来迭代。

<ul>
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }

结果:
在这里插入图片描述
你也可以增加第二个参数作为键名

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

结果:
在这里插入图片描述
第三个参数为索引:

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

结果:
在这里插入图片描述

提示: 如果要列表中每条数据都有它的唯一性,我们可以在使用 v-for 时,结合 key来保证唯一性。
例如:

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>
Logo

前往低代码交流专区

更多推荐