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

如何通过

v-for

X（例如10）次重复循环

//想重复（例如）10次吗


{{item.name}-{{item.price}

文件显示：

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

{{item}

//或
{{n}
//这不管用
{{item.price}

但是vue从哪里知道对象的来源？

---

如果按照文档中的说明进行渲染，则会得到项目数和项目数，但没有内容。

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

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

{{shoppingItems[index].name}-{{shoppingItems[index].price}

注意，这是1索引的：在第一次迭代中，

索引

是1，在第二次迭代中，

索引

是2，依此类推

---

您还可以查看以了解更多信息。

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

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

---

您可以使用本机JS切片方法：

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

---

根据迁移指南中的提示：

在2.2.0+中，当对组件使用v-for时，现在需要键

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

---

同样适用于范围内的v-for：

---

{{{n}
我不得不添加
parseInt（）
来告诉v-for它正在看一个数字

{{{n}}
不幸的是，这不起作用，但谢谢你为什么不直接迭代购物项目呢？Hy Bert-我只想知道如何给出v-for（最简单的方法）的重复次数，文档中的示例不起作用。。。。在纯js+ajax中，它的返回非常简单<9或，但这在方法中不起作用…有两种不同的模式
v-for
；当针对整数调用时，以及当针对数组调用时。混合使用这些模式并尝试使用整数来控制对数组内容的访问可能会导致问题。如果你需要数组的一个子集，你可以对它进行过滤。它可以工作：）我已经将它稍微更改为
{{{shoppingItems.price}
===MNY THXXXX编码器*****====如何使这10成为一个变量？形成组件的数据？为什么这是1-索引完全超出我的理解<代码>{{i}
=>
12345
。使用
{{i}}
获取0索引。我注意到您应该编写shoppingItems[index-1]。name以迭代整个索引array@ggorlen
v-for
指令与标准JS-for循环不同。第一个参数是标准用例中数组元素（不是索引）的别名。索引作为第二个元素给出，因此
（e，i）
返回元素及其索引。当使用
v-for=“n in 10”
时，
n
是“元素”，我猜它是索引+1。因此，您的解决方案是正确的：要获取索引，请使用
v-for=“（n，i）in 10”
，其中
n
为1索引，
i
为0索引。有关该指令的详细信息，请先查看答案。谢谢，最佳答案请注意，这是1-indexed。
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)
     }
  }

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