了解 Vue 项目的结构 (vuetify)

Question

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

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

<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> 标签组件只代表弹性框（基本上，div 和 display: flex; CSS 规则）。

放在 <v-layout> 标签内的 <v-flex> 标签组件是 flexbox 的元素（您可以使用 flex 自定义 "grow/shrink behavior" CSS 规则)

就是这样。

Answer 2

如果您希望任何元素并排显示（内联），请将它们放在 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>

了解 Vue 项目的结构 (vuetify)

Understanding the Stucture of a Vue Project (vuetify)

vue.js

vuejs2

vuetify.js