我如何通过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从哪里知道这些对象的来源呢? 如果我像文档说的那样渲染它，我得到了项目和项目的数量，但没有内容。
当前回答
尝试v-if在v-for中，因此，例如，如果你想只显示少于3(或任意数量)的项目，那么你可以这样做。
<span v-for="(item, itemIndex) in items" :key="itemIndex">
<div v-if="itemIndex < 3">
<p>
{{ item }}
</p>
</div>
</span>
其他回答
你可以在一个范围中使用一个索引，然后通过它的索引访问数组:
<ul>
<li v-for="index in 10" :key="index">
{{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
</li>
</ul>
注意，这是1索引:在第一次迭代中，index是1，在第二次迭代中，index是2，依此类推。
您也可以查看官方文档以获得更多信息。
有两种方法可以解决，
第一个是，
<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>
对于range中的v-for也是一样:
<li v-for="n in 20 " :key="n">{{n}}</li>
尝试v-if在v-for中，因此，例如，如果你想只显示少于3(或任意数量)的项目，那么你可以这样做。
<span v-for="(item, itemIndex) in items" :key="itemIndex">
<div v-if="itemIndex < 3">
<p>
{{ item }}
</p>
</div>
</span>
