如何通过 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 从哪里知道对象的来源呢? 如果我像文档所说的那样渲染它,我会得到项目和项目的数量,但没有内容。
最佳答案
您可以在范围内使用索引,然后通过其索引访问数组:
<ul>
<li v-for="index in 10" :key="index">
{{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
</li>
</ul>
请注意,这是 1 索引的:在第一次迭代中,index
为 1,在第二次迭代中,index
为 2,依此类推。
您还可以检查 Official Documentation获取更多信息。
关于javascript - Vue Js - 通过 v-for X 次循环(在一个范围内),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44617484/