Javascript 使用行/子结构循环

我开始越来越多地面对这个问题，我想知道是否有一个简单的解决办法。试图将一组数据循环到一个行/子类结构中有点困难

以下是我想要实现的目标

<div class="row">
  <div>Data 1</div>
  <div>Data 2</div>
<div class="row">
  <div>Data 3</div>
  ...

数据1
数据2
数据3
...

大多数时候，我最后做的是将我的数据循环放在一行中，等等。但这阻止了我以更定制的方式显示数据。。。有更好的办法吗

<div v-for="item in items">
   <div class="row">
    <div>{{ item.message }}</div>
   </div>
</div>

{{item.message}}

---

与3 item.messages之后一样，将生成一个新行，等等？

通常我会如何处理这一问题，即使用计算值以我想要的方式对数据进行分组，然后在分组的数据上迭代

console.clear（）
新Vue({
el:“应用程序”，
数据：{
待办事项：[
{id:1，文本：“学习Vue”}，
{id:2，文本：“学习Vuex”}，
{id:3，文本：“学习Vue路由器”}，
{id:4，文本：“学习javascript”}，
{id:5，文本：“洗碗”}，
{id:6，文本：“去健身房”}，
{id:7，文本：“和萨利出去”}，
],
todosPerRow:3
},
计算：{
分组（）{
返回此.todos.reduce（（acc、val、ndx）=>{
让key=Math.floor（ndx/this.todosPerRow）
if（acc[键]）acc[键]。推送（val）
else acc[键]=[val]
返回acc
}, {})
}
}
})

.row{
边框：1px实心
}

{{todo.text}

Hi@Bert，比如，仅仅列出10件待办事项。但我希望每3个待办事项被安置在一个行div中，因此结果将是4行。前3行包含3个数据，最后一行包含一个输入的数据。对于正常的v-for循环，我要么得到10行，每个行中有一个数据，要么得到1行，每个行中有10个数据。我想知道如何打破循环，使它可以遵循1行3的数据结构。谢谢你为我澄清了它。很好！我会去试试，也会去看看洛达斯。谢谢~~~