我如何通过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从哪里知道这些对象的来源呢? 如果我像文档说的那样渲染它,我得到了项目和项目的数量,但没有内容。


当前回答

我必须添加parseInt()来告诉v,因为它正在查看一个数字。

<li v-for="n in parseInt(count)" :key="n">{{n}}</li>

其他回答

<ul v-for="(item, index) in items.slice(0,10)" :key="item.index">
<li>
 {{item.name}}-{{item.price}}
</li>
</ul>

这对我有用。

<li v-for="(index,key) in data.slice(0,5)" :key="key">{{ index.title }}</li>

在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>

希望你能得到答案,谢谢。

如果你想要循环x次,你可以简单地使用以下命令:

<div v-for="(item, index) in 10" :key="index">{{ item }}</div>