vue 这样的循环有办法写没

Question

生成 HTML

<div>
    <ul>
          <li>0</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
    </ul>
    <ul>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
    </ul>
    <ul>
          <li>8</li>
          <li>9</li>
          <li>10</li>
          <li>11</li>
    </ul>
</div>

开始想是这样写，可直接报错

<template>
    <div>
        <ul>
            <template v-for="(dt, index) in 20" :key="index">
                <li>{{index}}</li>
                <template v-if="(index != 0) && (index + 1 != 20) && (index % 4 == 0)"></ul><ul></template>
            </template>
        </ul>
    </div>
</template>

Answer 1

<div>
  <ul v-for="(r, ri) in 5">
    <li v-for="(c, ci) in 4">{{ ri * 5 + ci }}</li>
  </ul>
</div>

如果数据本身是一个列表，使用 Lodash _.trunk 拆成二维数组来使用

---

补个自己写的 chunk 函数

function chunk(arr, chunkSize) {
    return arr.reduce(
        (chunks, it, i) => {
            chunks[~~(i / chunkSize)].push(it);
            return chunks;
        },
        Array.from(
            Array(Math.ceil(arr.length / chunkSize)),
            () => []
        )
    );
}