Vue Js - 通过 v-for X 次循环（在一定范围内）

javascript vue.js vuejs2 v-for

2022-08-30 00:53:37

如何通过 X 次（例如 10 次）重复循环？v-for

// 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 从哪里知道对象的来源？如果我像文档所说的那样渲染它，我会得到项目和项目的数量，但没有内容。

答案 1

您可以在一个范围内使用索引，然后通过其索引访问数组：

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

请注意，这是 1 索引：在第一次迭代中为 1，在第二次迭代中为 2，依此类推。indexindex

您还可以查看官方文档以获取更多信息。

答案 2

我在多夫·本杰明（Dov Benjamin）的帮助下解决了这个问题，就像这样：

<ul>
  <li v-for="(n,index) in 2">{{ n }}, {{ index }}</li>
</ul>

请注意，在本例中，为 1 索引，而为 0 索引。nindex

还有另一种方法，对于 vue 的 V1.x 和 2.x.js

Vue 1:

<p v-for="item in items | limitBy 10">{{ item }}</p>

Vue2:

// Via slice method in computed prop

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
   filteredItems: function () {
     return this.items.slice(0, 10)
     }
  }