v-for 怎么‘中断’ 和 ‘继续’？

Question

首先标题是有些问题的，因为我也不知道怎么清楚的描述，还请各位大佬支招

假如现在要遍历10个span元素
本来打算用v-for的
但是从三个起突然要换行（不是因为宽度之类换行的，是**设计成两行的**）

形如：
0 1 2
3 4 5 6 7 8 9

代码如下：
<div>
    <span>0</span>
    <span>1</span>
    <span>2</span>  //在这里中断
</div>
<div>
    <span>3</span>  //在这里继续
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
</div>

这个怎么办？ 手写吗？ 还是要写两个v-for?

Answer 1

建议还是先前数据拆为子元素为二个元素的二维数组

直接用v-for也许可以这样

<div>
    <template v-for="(item, index) in list">
        <span>item</span>
        <template v-if="(index+1)%3===0"></div><div></template>
    </template>
</div>

根据最新的需求的话 将 (index+1)%3===0 改为 index === 2就好

Answer 2

这个一般都是用 css 布局控制吧 你控制好格子占的位置,遍历数据填充上去就行 你说的也没啥规律,要实现有太多方法了

Answer 3

用css控制吧，每个span宽度33%不就会换行了吗

Answer 4

<div>

<span v-for="(item,index) in list">{{index}}<br v-if="index==2"></span>

</div>

Answer 5

<div>

<template v-for="(item, index) in list">
    <span>item</span>
    <br  v-if="index ===2 "/>  //换行
</template>

</div>