我如何通过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从哪里知道这些对象的来源呢? 如果我像文档说的那样渲染它，我得到了项目和项目的数量，但没有内容。
当前回答
第一个版本
// 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>
上面的示例代码用于循环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>
其他回答
在2.2.0+中，当对组件使用v-for时，现在需要一个键。
<div v-for="item in items" :key="item.id">
源
有两种方法可以解决，
第一个是，
<div v-for="(item, index) in items.slice(0,10)" :key="index">
第二点是，
<li v-for="item in 20 " :key="item">{{item}}</li>
希望你能得到答案，谢谢。
<ul v-for="(item, index) in items.slice(0,10)" :key="item.index">
<li>
{{item.name}}-{{item.price}}
</li>
</ul>
我必须添加parseInt()来告诉v，因为它正在查看一个数字。
<li v-for="n in parseInt(count)" :key="n">{{n}}</li>
如果你想要循环x次，你可以简单地使用以下命令:
<div v-for="(item, index) in 10" :key="index">{{ item }}</div>
