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

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

363414 次浏览
小开

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

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

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

你也可以检查官方文档以获得更多信息。

小开

我在Dov Benjamin的帮助下解决了这个问题

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

注意，在这种情况下，n是1索引，而index是0索引。

另一种方法，对于两个V1。X和2。vue.js的X

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

你可以使用原生JS slice方法:

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

slice()方法将数组中选定的元素作为一个新的数组对象返回。

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

小开

在2.2.0+版本中，当对组件使用v-for时，关键现在是要求。

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

Source .

小开

范围中的v-for也是一样:

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

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

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

解决方案1:

<p v-for="i in 5" :key="i">\{\{ i }}</p>

记住，结果是1-5。

enter image description here

<强>解决方案2: 如果你想在数组中显示有限数量的元素。你应该使用JavaScript的片()方法 

<p v-for="i in usersList.slice(0,5)" :key="i">\{\{ i }}</p>
小开

有两种方法可以解决，

第一个是，

<div v-for="(item, index) in items.slice(0,10)" :key="index">

第二点是，

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

希望你能得到答案，谢谢。

小开

如果你想要循环x次，你可以简单地使用以下命令:

<div v-for="(item, index) in 10" :key="index">\{\{ item }}</div>
小开

第一个版本

// I expect your data like this
shoppingItems: [
{
name: "Clothes A",
price: 1000
},
{
name: "Clothes B",
price: 5000
},
{
name: "Clothes C",
price: 20000
}
]


<ul>
// The item in here means each object in shoppingItems
<li v-for="item in shoppingItems">
\{\{ item.name }} - \{\{ item.price }}
</li>
</ul>

上面的示例代码用于循环shoppingItems中的每个项目

第二个版本

<ul>
// The index will start form 0 until 10 - 1
<li v-for="index in 10">
\{\{ shoppingitems[index].name }} - \{\{ shoppingitems[index].price }}
</li>
</ul>

提交答案