Vue Js - 通过v-循环X次(在一个范围内) [英] Vue Js - Loop via v-for X times (in a range)
本文介绍了Vue Js - 通过v-循环X次(在一个范围内)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何通过 v-for
X(例如10次)重复循环?
How can I repeat a loop via v-for
X (e.g. 10) times?
// 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从哪里知道对象的来源?
如果我像文档说的那样呈现它,我会得到项目和项目的数量,但没有内容。
but from where does vue know the source of the objects? If I render it like the doc says, I get the number of items and items, but without content.
推荐答案
您可以使用范围内的索引,然后通过索引访问数组:
You can use an index in a range and then access the array via its index:
<ul>
<li v-for="index in 10" :key="index">
{{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
</li>
</ul>
您还可以查看官方文档以获取更多信息。
You can also check the Official Documentation for more information.
这篇关于Vue Js - 通过v-循环X次(在一个范围内)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文