如何用不同的步骤修改v-for或使用v-for？

Question

假设我有一个数组

arr = 1,2,3,4,5,6,7,8,9

如何使用v-for获得以下结果：

<template>
    <div>
        <div v-for="elem in arr">
            // here i need to produce a div every 4 steps
            // each div will contain 4 elements in right order
        </div>
    </div>
</template>
<script>
export default {
    name:home,
    data(){
        return {
            arr:[1,2,3,4,5,6,7,8,9],
        }
    }
}
</script>

所以我得到了3div，每个元素包含4个元素。

Answer 1

在组件定义中：

data: () => ({
    arr: [1,2,3,4,5,6,7,8,9]
}),
computed: {
    chunkedArr() {
        const result = []
        for (let i = 0; i < this.arr.length; i += 4)
            result.push(this.arr.slice(i, i + 4))
        return result
    }
} 

在模板中：

<div v-for="a in chunkedArr">
    <div v-for="i in a">{{ i }}</div>
</div>