Vue Js-通过v-循环X次（在一定范围内）
如何重复v-forX次（例如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从哪里知道对象的来源？如果我像文档所说的那样渲染它，我将得到项目和项目的数量，但是没有内容。
第492篇《Vue Js-通过v-循环X次（在一定范围内）》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
您可以使用本机JS slice方法：
<div v-for="item in shoppingItems.slice(0,10)">
slice（）方法将数组中选定的元素作为新的数组对象返回。
根据迁移指南中的提示：https：//vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter
您可以使用范围内的索引，然后通过其索引访问数组：
<ul>
<li v-for="index in 10" :key="index">
{{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
</li>
</ul>
您也可以查看官方文档以获取更多信息。
我已经在Dov Benjamin的帮助下解决了这个问题：
<ul>
<li v-for="(n,index) in 2">{{ object.price }}</li>
</ul>
另一种方法，适用于vue.js的V1.x和2.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)
}
}
var itemArray = ["item1", "item2", "item3", "item4", "item4"]<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul>
<li v-for="item in itemArray">
{{item}}
</li>
</ul>v-for在范围内也是如此：
<li v-for="n in 20 " :key="n">{{n}}</li>
我不得不parseInt()告诉v-因为它正在查看一个数字。
<li v-for="n in parseInt(count)" :key="n">{{n}}</li>
相似问题
问题类别
在2.2.0+中，将v-for用于组件时，现在需要一个密钥。
资源