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

Question

如何通过 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从哪里知道对象的来源呢？

如果我像文档所说的那样渲染它，我会得到项目和项目的数量，但没有内容。

原文由 MikeCaine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

请注意，这是 1 索引的：在第一次迭代中， index 为 1，在第二次迭代中， index 为 2，依此类推。

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

原文由 Dov Benyomin Sohacheski 发布，翻译遵循 CC BY-SA 4.0 许可协议