这是我的 vue 布局:
<template lang="pug">
.row
.col-4(v-for="article in articles") // need to render 1-3 items here
| {{ article.name }}
.row
.col-4(v-for="article in articles") // need to render 4-6 items here
| {{ article.name }}
</template>
<script>
export default {
name: 'Articles',
data() {
return {
articles: [
{ name: 'Article 1' },
{ name: 'Article 2' },
{ name: 'Article 3' },
{ name: 'Article 4' },
{ name: 'Article 5' },
{ name: 'Article 6' },
]
}
},
}
</script>
目标是:
<div class="row">
<div class="col-4">article[0].name</div>
<div class="col-4">article[1].name</div>
<div class="col-4">article[2].name</div>
</div>
<div class="row">
<div class="col-4">article[3].name</div>
<div class="col-4">article[4].name</div>
<div class="col-4">article[5].name</div>
</div>
在 Flask 和 Jinja 等基于 Python 的微框架中,可以这样做:
{% for article_row in articles | batch(3, ' ') %}
<div class="row">
{% for article in article_row %}
<div class="span4">{{ article }}</div>
{% endfor %}
</div>
{% endfor %}
那么,在 vue.js 中有没有办法像上面那样做?
最佳答案
我会使用 helper groups 数组来呈现行中的文章组:
<template lang="pug">
.container
.row(v-for="(group, i) in articleGroups")
.col-4(v-for="article in articles.slice(i * itemsPerRow, (i + 1) * itemsPerRow)")
| {{ article.name }}
</template>
<script>
export default {
name: 'Articles',
data() {
return {
itemsPerRow: 3,
articles: [
{ name: 'Article 1' },
{ name: 'Article 2' },
{ name: 'Article 3' },
{ name: 'Article 4' },
{ name: 'Article 5' },
{ name: 'Article 6' },
]
}
},
computed: {
articleGroups () {
return Array.from(Array(Math.ceil(this.articles.length / this.itemsPerRow)).keys())
}
},
}
</script>
关于javascript - vue.js - 如何将对象数组拆分为多个 div 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50038129/