Vue Js - 通过 v-for 循环 X 次(在一个范围内) [英] Vue Js - Loop via v-for X times (in a range)

问题描述

如何通过 v-for 重复循环 X(例如 10)次?

//想要重复这个(例如)10 次<ul><li v-for="shoppingItems 中的项目">{{ item.name }} - {{ item.price }}

文档显示:

<li v-for="item in 10">{{ item }}</li>
//或者<li v-for="n in 10">{{ n }} </li>//这不起作用<li v-for="item in 10">{{ item.price }}</li>

但是 vue 从哪里知道对象的来源呢?如果我像文档说的那样渲染它，我会得到项目和项目的数量，但没有内容.

解决方案

你可以在一个范围内使用一个索引，然后通过它的索引访问数组:

<li v-for="index in 10";:key=索引">{{shoppingItems[index].name}} - {{shoppingItems[index].price }}

请注意，这是 1-indexed:在第一次迭代中，index 为 1，在第二次迭代中，index 为 2，以此类推.>

您还可以查看官方文档 了解更多信息.

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>

The documentation shows:

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

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>

Note that this is 1-indexed: in the first iteration, index is 1, and in the second iteration, index is 2, and so forth.

You can also check the Official Documentation for more information.

这篇关于Vue Js - 通过 v-for 循环 X 次(在一个范围内)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！