Vuetify 的条件断点

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-flex，一个带有 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">