了解 Vue 项目的结构 (vuetify)

Question

我是 Vue 和 Vuetify 的新手，我只是想弄清楚我在编写代码时应该具备的结构。我开始对 v-layout 和 v-flex 之间的区别感到有些困惑。

这是我当前的结构：我正在尝试将 flex xs8（带有房间类型）放置在 flex xs2（带有“测试”段落）旁边。

<v-container ma-6 grid-list-xl>

            <v-layout>

                <v-flex md8 xs12>

                    <!-- My spaces -->
                    <v-layout v-for="space in spaces" v-if="space.id === selected" :key="space.id" row wrap>

                        <!-- The rooms -->
                        <v-flex v-for="room in space.rooms" :key="room.id" xs12 md6>

                            <!-- A room -->
                            <v-card class="card-round">

                                <!-- Image -->
                                    <v-carousel>
                                        <v-carousel-item v-for="image in room.images" :src="image.src" :key="image.id"></v-carousel-item>
                                    </v-carousel>

                                    <!-- Information -->
                                    <v-layout row wrap>

                                        <v-card-text primary-title>

                                            <v-flex xs8>
                                                <p> {{ room.type }} </p>
                                                <h3 class="headline"> {{ room.name }} </h3>
                                            </v-flex>

                                            <v-flex xs2>
                                                <p>test</p>
                                            </v-flex>

                                        </v-card-text>

                                    </v-layout>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </v-flex>

                <v-flex hidden-md-and-down>
                    <p>temp sidebar</p>
                </v-flex>

            </v-layout>

</v-container>

Answer 1

如果您希望任何元素并排显示（内联），请将它们放入 v-layout

<v-layout>

  <v-flex xs8>
    <p> {{ room.type }} </p>
    <h3 class="headline"> {{ room.name }} </h3>
  </v-flex>

  <v-flex xs2>
    <p>test</p>
  </v-flex>

</v-layout>

Answer 2

<v-layout> 标签组件仅代表弹性框（基本上，一个带有display: flex; CSS 规则的 div）。

您放在<v-layout> 标签内的<v-flex> 标签组件是您的弹性框的元素（您可以使用flex CSS 规则自定义“增长/收缩行为”的元素）

就是这样。