Question

我的布局如下：

这是我使用的代码：

<template>
    <v-card>
        <v-card-text>
            <v-container grid-list-xl fluid class="py-0 mb-5">
                <v-layout row wrap>
                    <v-flex xs12 lg8>
                        <v-container class="pa-0 mb-5">
                            <v-layout>
                                <v-flex xs12 class="py-0">
                                    <v-subheader class="pa-0 mb-3">
                                        Title 1
                                    </v-subheader>
                                </v-flex>
                            </v-layout>
                            <v-layout wrap>
                                <v-flex xs12 md4 lg6>
                                    Content 1
                                </v-flex>
                                <v-flex xs12 md8 lg6>
                                    Content 2
                                </v-flex>
                            </v-layout>
                        </v-container>
                    </v-flex>
                    <v-flex xs12 lg4>
                        <v-container class="pa-0">
                            <v-layout row>
                                <v-flex xs12 class="py-0">
                                    <v-subheader class="pa-0 mb-3">
                                        Title 2
                                    </v-subheader>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex xs12>
                                    Content 3
                                </v-flex>
                            </v-layout>
                        </v-container>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-card-text>
    </v-card>
</template>

非常简单，它可以满足我的需要。但是，现在我遇到以下问题... “内容2”可能不存在。如果“内容2”不存在，则会发生这种情况：

但是我实际上希望发生这种情况：

有没有办法可以控制断点？我想以某种方式在lg4和lg8之间切换，这取决于我是否拥有“内容2”。我曾考虑过创建两个v-flexes，一个使用lg4，另一个使用lg8，仅显示一个或另一个，但是我不想重复我的代码，创建一个新组件也是'对我来说不可能。

理想情况下，我想执行以下操作：

<v-flex v-if="content2Exists" xs12 lg8>
<v-flex v-else xs12 lg4>
    Blabla...
</v-flex>

Answer 1

我认为您应该在lg(x)道具中尝试以下条件：

  <v-flex  xs12 :lg4="!content2Exists" :lg8="content2Exists">

Vuetify的条件断点

1 个答案: