如何渲染一个包含 3 个项目和 2 列的循环，其中 1 个在第一列，另外 2 个在第 2 列？

Question

我正在尝试循环浏览 3 张照片，它们应该以 2 列输出。第一列中的第一张照片，然后是第二列中的其余 2 张照片，在一行内。会有多行相同类型的数据。

这是我目前所拥有的，但每张图片都呈现在一个单独的列中。

    <b-row>
      <template v-for="(item, index) in slice.items">
        <b-col :key="item.id" v-if="index == 0" class="gallery-item">
          <img :field="item.photo" class="img-fluid"/>
        </b-col>
        <template v-if="index == 1 || index == 2">
          <b-col :key="item.id" class="gallery-item">
            <img :field="item.photo" class="img-fluid"/>
          </b-col>
        </template>
      </template>
    </b-row>

Answer 1

你为什么不试试这个？

   <b-row>
    <b-col :key="item.id" class="gallery-item">
      <img :field="slice.items[0].photo" class="img-fluid"/>
    </b-col>
   </b-row>

   <b-row>
    <template v-for="(item, index) in slice.items.slice(1, slice.items.length)">
      <b-col :key="item.id" class="gallery-item">
        <img :field="item.photo" class="img-fluid"/>
      </b-col>
     </template>
    </b-row>

Answer 2

这对你有用。

<b-row v-for="slice in allSlices">
   <b-col class="gallery-item">
       <img :field="slice.items[0].photo" class="img-fluid"/>
   </b-col>

    <b-col>
      <b-row v-for="(item, index) in slice.items.slice(1, slice.items.length)">
        <b-col :key="item.id" class="gallery-item">
           <img :field="item.photo" class="img-fluid"/>
        </b-col>
      </b-row>
    </b-col>      
</b-row>

我考虑过2个固定栏目。

第一列： 它将包含 索引 0 处的数据（slice.items[0]）。

第二列： 它将包含动态数据（它将显示剩余的 slice.items 个值）。

请检查此 link 以获取输出。

如何渲染一个包含 3 个项目和 2 列的循环，其中 1 个在第一列，另外 2 个在第 2 列？

How do I render a loop with 3 items and 2 columns, 1 in the fist column, and the other 2 in the 2nd column?

vue.js

v-for

bootstrap-vue