Javascript 如果元素长度超过某个值，则自动创建第二行

所以我试图使它，如果有超过六个元素，那么它将有一半的元素在顶部，另一半在底部

目前我在Vue.js中是这样做的：

<table>
    <tbody>
        <template v-if="cards.length <= 6">
            <tr>
                <td v-for="card in cards">
                    {{ card }}
                </td>
            </tr>
        </template>
        <template v-else>
            <tr>
                <td v-for="card in cardsFirstHalf">
                    {{ card }}
                </td>
            </tr>
            <tr>
                <td v-for="card in cardsSecondHalf">
                    {{ card }}
                </td>
            </tr>
        </template>
    </tbody>
</table>

---

有更好的方法吗？

通过js更容易实现您的需求

HTML:

JS:

---

我也在使用computed，虽然你的答案更简洁。

<div id="app">
<table>
    <tbody>
            <tr v-for="row in rows">
                <td v-for="card in row">
                    {{ card }}
                </td>
            </tr>
    </tbody>
</table>
</div>

new Vue({
    el: '#app',
    data: {
        max: 6,
        cards: ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7']
    },
    computed: {
        rows() {
            let cards = this.cards;
            if (cards.length <= this.max)
                return [cards]

            var mid = Math.ceil(cards.length / 2);
            return [cards.slice(0, mid), cards.slice(mid)]
        }
    }

})