Question

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

Answer 1

您可以使用范围内的索引，然后通过索引访问该数组：

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

您还可以查看Official Documentation以获取更多信息。

Answer 2

我已经用Dov Benjamin的帮助解决了这个问题：

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

＆安培;我搜索的另一种方法＆amp;结果

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

谢谢编码员！

见你

Answer 3

您可以使用本机JS切片方法：

<div v-for="item in shoppingItems.slice(0,10)">

slice（）方法返回数组中的选定元素，作为新的数组对象。

根据迁移指南中的提示：https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

Answer 4

范围中的v-for也是如此：

<li v-for="n in 20 " :key="n">{{n}}</li>

Answer 5

我必须添加parseInt()来告诉v，因为它正在查看数字。

<li v-for="n in parseInt(count)" :key="n">{{n}}</li>

Answer 6

在2.2.0+中，当使用v-for组件时，键现在必需。

<div v-for="item in items" :key="item.id">

Source

Answer 7

var itemArray = ["item1", "item2", "item3", "item4", "item4"]

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul>
  <li v-for="item in itemArray">
    {{item}}
  </li>
</ul>

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

7 个答案: