时间戳

首页 > 解决方案 > Bootstrap-Vue 基于 v-for 中的布尔值的不同 col 大小

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

问题描述

嗨，我从我的 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>

标签： javascriptvue.jsbootstrap-4bootstrap-vue

解决方案

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>

推荐阅读