Vue Js - 通过 v-for 循环 X 次（在一个范围内）答案

【问题标题】：Vue Js - Loop via v-for X times (in a range)Vue Js - 通过 v-for 循环 X 次（在一个范围内）
【发布时间】：2017-11-20 21:32:56
【问题描述】：

如何通过v-for 重复循环 X（例如 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 是从哪里知道对象的来源的呢？如果我像文档说的那样渲染它，我会得到项目和项目的数量，但没有内容。

【问题讨论】：

很遗憾这不起作用，但谢谢
为什么不只迭代 shoppingItems？
Hy Bert - 我只想知道如何给 v-for（最简单的方法）一个 (x) 重复次数，并且文档中的示例不起作用...... ....在纯 js + ajax 中它如此简单的返回
v-for 有两种不同的模式；当它被一个整数调用时，以及当它被一个数组调用时。混合这些模式并尝试使用整数来控制对数组内容的访问可能会导致问题。如果你需要数组的一个子集，你可以过滤它。

标签： javascript vue.js vuejs2 v-for

【解决方案1】：

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

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

注意这是 1-indexed：在第一次迭代中，index 为 1，在第二次迭代中，index 为 2，依此类推。

您也可以查看Official Documentation 了解更多信息。

【讨论】：

它可以工作 ::) 我在 2">{{ shoppingItems.price }} 中将其稍微更改为
如何把这10个变量变成组件的数据？

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

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

@ggorlen v-for 指令不同于标准的 JS for 循环。第一个参数是标准用例中数组元素（不是索引）的别名。索引作为第二个元素给出，因此(e, i) 返回该元素及其索引。当使用v-for="n in 10" 时，n 是“元素”，我猜它是 index+1。所以你的解决方案是正确的：使用v-for="(n, i) in 10" 获取索引，其中n 是1-indexed，i 是0-indexed。有关该指令的详细信息，请参见 vuejs.org/v2/guide/list.html

【解决方案2】：

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

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

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

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

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

【讨论】：

我必须添加 :key 才能使其在 vue3 中工作，因此 <li v-for="(n, index) in 2" :key="index">{{ n }}, {{ index }}</li>

【解决方案3】：

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

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

【讨论】：

请注意，这是 1-indexed。
谢谢！这在 vue 2.6.12 中有效！

【解决方案4】：

可以使用原生的 JS 切片方法：

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

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

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

【讨论】：

谢谢，最佳答案

【解决方案5】：

  <p v-for="i in 5" :key="i"> {{ i }} </p>

【讨论】：

这从1开始，而不是0....

【解决方案6】：

范围中的 v-for 也是如此：

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

【讨论】：

请先查看tdhulster的答案。

【解决方案7】：

有两种方法可以解决，

第一个是，

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

第二个是，

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

希望您能得到您的答复，谢谢。

【讨论】：

你能解释一下他们是如何解决的，选择第二个而不是第一个的条件是什么？请edit你的答案:)
@Elikill58，嘿，这意味着，v-fop 循环将继续 20（X 次）次。仅供参考，20 不是固定数字，是 X 次。

【解决方案8】：

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

<div v-for="(item, index) in 10" :key="index">{{ item }}</div>

【讨论】：

【解决方案9】：

在 2.2.0+ 中，当将 v-for 与组件一起使用时，key 现在是必需。

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

Source

【讨论】：