我如何通过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从哪里知道这些对象的来源呢? 如果我像文档说的那样渲染它，我得到了项目和项目的数量，但没有内容。
当前回答
解决方案1:
<p v-for="i in 5" :key="i">{{ i }}</p>
记住，结果是1-5。
解决方案2: 如果你想在数组中显示有限数量的元素。你应该使用JavaScript的slice()方法。
<p v-for="i in usersList.slice(0,5)" :key="i">{{ i }}</p>
其他回答
你可以在一个范围中使用一个索引，然后通过它的索引访问数组:
<ul>
<li v-for="index in 10" :key="index">
{{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
</li>
</ul>
注意，这是1索引:在第一次迭代中，index是1，在第二次迭代中，index是2，依此类推。
您也可以查看官方文档以获得更多信息。
解决方案1:
<p v-for="i in 5" :key="i">{{ i }}</p>
记住，结果是1-5。
解决方案2: 如果你想在数组中显示有限数量的元素。你应该使用JavaScript的slice()方法。
<p v-for="i in usersList.slice(0,5)" :key="i">{{ i }}</p>
我在Dov Benjamin的帮助下解决了这个问题
<ul>
<li v-for="(n,index) in 2">{{ n }}, {{ index }}</li>
</ul>
注意，在这种情况下，n是1索引，index是0索引。
另一种方法，对于两个V1。X和2。vue.js的X
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)
}
}
你可以使用原生JS slice方法:
<div v-for="item in shoppingItems.slice(0,10)">
slice()方法将数组中选定的元素作为一个新的数组对象返回。
根据迁移指南中的提示:https://v2.vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter
第一个版本
// 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>
