Bootstrap-Vue 基于 v-for 中的布尔值的不同 col 大小答案

【问题标题】：Bootstrap-Vue diffrent col size based on boolean in v-forBootstrap-Vue 基于 v-for 中的布尔值的不同 col 大小
【发布时间】：2021-06-16 15:04:18
【问题描述】：

嗨，我从我的 api 中获取 5 个 cols，如果我希望它是 col-12，则使用 boolean for full-size = true，我是 vue.js 的新手并且无法弄清楚，但是我使用过 bootstrap很久了

我的布局需要

col-6 col-6
col-12
col-6 col-6

但我得到的是
col-6
col-6
col-12
col-6
col-6

有人可以指导我正确的方式

<b-container class="h-100" v-for="block in item.block" :key="block.id">
        <b-row class="h-100 justify-content-center align-items-center text-center">
            <b-col v-if="block.fullWidth" class="col-12">
                <section class="sf-banner hero" v-bind:style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
                  <h1 class="sf-banner__title">{{block.title}}</h1>
                </section>
            </b-col>
        </b-row>
        <b-row class="h-100 justify-content-center align-items-center text-center">
            <b-col class="col-6" v-if="!block.fullWidth">
                <section class="sf-banner block" v-bind:style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
                  <h1 class="sf-banner__title">{{block.title}}</h1>
                </section>
            </b-col>
        </b-row>
    </b-container>

【问题讨论】：

标签： javascript vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

v-for 应该在列而不是容器上，然后使用

:class="{'col-12': block.fullWidth, 'col-6': !block.fullWidth}"

或

:class="[block.fullWidth ? 'col-12' : 'col-6']"

RTM：https://vuejs.org/v2/guide/class-and-style.html

<b-container class="h-100">
  <b-row class="h-100 justify-content-center align-items-center text-center">
    <b-col v-for="block in item.block" :key="block.id" :class="{'col-12': block.fullWidth, 'col-6': !block.fullWidth}">
      <section class="sf-banner hero" :style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
        <h1 class="sf-banner__title">{{block.title}}</h1>
      </section>
    </b-col>
  </b-row>
</b-container>

【讨论】：