Vue Js-通过v-循环X次（在一定范围内）

107

如何重复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从哪里知道对象的来源？如果我像文档所说的那样渲染它，我将得到项目和项目的数量，但是没有内容。

— 迈克·凯恩
source

不幸的是，这行不通，但是谢谢

— MikeCaine

您为什么不只迭代shoppingItems？

— Bert

1

Hy Bert-我只想知道如何为v-for（最简单的方式）提供一个（x）重复次数，并且文档中的示例不起作用..........在纯js +阿贾克斯其如此简单的返回<9或或或，但这在该方法中不起作用...

— MikeCaine

有两种不同的模式v-for; 在针对整数调用时以及针对数组调用时。混合使用这些模式并尝试使用整数来控制对数组内容的访问可能会导致问题。如果需要数组的子集，则可以对其进行过滤。

— 杰森·艾勒

172

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

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

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

— 多夫·本约明·索哈切斯基（Dov Benyomin Sohacheski）
source

3

它可以工作：:)我在2“> {{shoppingItems.price}} </ li>中将其略微更改为<li v-for =”（n，index）</ li> ==== MNY THXXXX编码器***** ！====

— MikeCaine

如何使那10个变量？构成组件的数据？

— alvaro

6

为什么将其索引为1，这完全超出了我的理解。<span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5。使用<span v-for="(e, i) in 5">{{i}} </span>得到0索引。

— ggorlen

我注意到您应该编写shoppingItems [index -1] .name以遍历整个数组

— peschanko

24

我已经在Dov Benjamin的帮助下解决了这个问题：

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

另一种方法，适用于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)
     }
  }

— 迈克·凯恩
source

14

我不得不补充parseInt()说v-因为它正在查看一个数字。

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

— abbaf33f
source

12

您可以使用本机JS slice方法：

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

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

根据迁移指南中的提示：https：//vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

— 尼克·格林
source

谢谢，最好的答案

— 解决方案精神

3

v-for在范围内也是如此：

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

— 最佳主机
source

1

请先检查tdhulster答案。

— besthost

1

在2.2.0+中，将v-for用于组件时，现在需要一个密钥。

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

资源

— Tdhulster
source