201

如何通过v-forX(例如 10)次重复循环?

// want to repeat this (e.g.) 10 times

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

文档显示:

<ul>
  <li v-for="item in 10">{{ item }}</li>
</ul>

// or 

<li v-for="n in 10">{{ n }} </li>

// this doesn't work

<li v-for="item in 10">{{ item.price }}</li>

但是vue从哪里知道对象的来源呢?如果我像文档所说的那样渲染它,我会得到项目和项目的数量,但没有内容。

4

9 回答 9

292

您可以使用范围内的索引,然后通过其索引访问数组:

<ul>
  <li v-for="index in 10" :key="index">
    {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
  </li>
</ul>

请注意,这是 1-indexed:在第一次迭代中,index是 1,在第二次迭代中,index是 2,依此类推。

您还可以查看官方文档以获取更多信息。

于 2017-06-18T17:18:32.463 回答
59

我在 Dov Benjamin 的帮助下解决了这个问题:

<ul>
  <li v-for="(n,index) in 2">{{ n }}, {{ index }}</li>
</ul>

请注意,在这种情况下,n是 1-indexed,并且index是 0-indexed。

还有另一种方法,适用于 vue.js 的 V1.x 和 2.x

Vue 1:

<p v-for="item in items | limitBy 10">{{ item }}</p>

Vue2:

// Via slice method in computed prop

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
   filteredItems: function () {
     return this.items.slice(0, 10)
     }
  }
于 2017-06-18T18:25:14.773 回答
29

我必须添加parseInt()以告诉 v-因为它正在查看一个数字。

<li v-for="n in parseInt(count)" :key="n">{{n}}</li>

于 2019-03-20T14:44:34.883 回答
24

可以使用原生 JS 切片方法:

<div v-for="item in shoppingItems.slice(0,10)">

slice() 方法将数组中的选定元素作为新的数组对象返回。

基于迁移指南中的提示:https ://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

于 2018-01-31T09:42:02.263 回答
10
  <p v-for="i in 5" :key="i"> {{ i }} </p>
于 2021-08-21T09:40:57.327 回答
6

v-for in range也是如此:

<li v-for="n in 20 " :key="n">{{n}}</li>

于 2018-05-16T08:15:31.643 回答
4

有两种方法可以解决,

第一个是,

<div v-for="(item, index) in items.slice(0,10)" :key="index">

第二个是,

<li v-for="item  in 20 " :key="item">{{item}}</li>

希望得到您的答复,谢谢。

于 2021-10-08T11:39:43.467 回答
2

在 2.2.0+ 中,当将 v-for 与组件一起使用时,现在需要一个

<div v-for="item in items" :key="item.id">

资源

于 2018-04-08T15:07:30.343 回答
2

如果您想循环 x 次,您可以简单地使用以下命令:

<div v-for="(item, index) in 10" :key="index">{{ item }}</div>
于 2022-01-06T07:27:34.960 回答