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

Question

如何通过 v-for X（例如 10）次重复循环？

 // want to repeat this (eg) 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

第一个版本

// I expect your data like this
 shoppingItems: [
 {
 name: "Clothes A",
 price: 1000
 },
 {
 name: "Clothes B",
 price: 5000
 },
 {
 name: "Clothes C",
 price: 20000
 }
 ]

 <ul>
 // The item in here means each object in shoppingItems
 <li v-for="item in shoppingItems">
 {{ item.name }} - {{ item.price }}
 </li>
 </ul>

上面的示例代码是 for 循环 shoppingItems 中的每个项目

第二版

<ul>
 // The index will start form 0 until 10 - 1
 <li v-for="index in 10">
 {{ shoppingitems[index].name }} - {{ shoppingitems[index].price }}
 </li>
 </ul>

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