javascript - 如果元素长度超过特定值，自动创建第二行

Question

所以我试图做到这一点，如果有超过六个元素，它将有一半元素在顶部，另一半在底部。

目前我是这样做的(在 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>

有更好的方法吗？

Answer 1

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

https://jsfiddle.net/qapf3yfL/1/

HTML:

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

JS:

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)]
        }
    }

})