Question

如何在Vuetify中实现类似于此Demo的轮播中的多张卡

<v-carousel>
  <v-carousel-item
  v-for="(item,i) in items"
  :key="i"
  :src="item.src">
    <card></card> // card will be here
  </v-carousel-item>
</v-carousel>

我想显示每张幻灯片6张卡片，3列2行。或是否有可用的插件

Answer 1

您需要两个“ v-for”，第一个限制为2，第二个限制为6。如果要2行，请查看vuetify官方文档grid system documentation

尝试一下，它没有您的示例风格

<v-flex>
  <v-carousel hide-delimiters style="box-shadow: 0px 0px">
    <v-carousel-item v-for="i in 2" :key="i">
      <v-layout row>
        <v-flex sm4 v-for="j in 6" :key="j" pl-2 pr-2>
          <v-card>
            <v-img
              src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
              aspect-ratio="0.8"
            ></v-img>
            <v-card-title primary-title>
              <div>
                <h3 class="headline mb-0">Card {{i}}-{{j}}</h3>
                <div> Card text </div>
              </div>
            </v-card-title>
          </v-card>
        </v-flex>
      </v-layout>
    </v-carousel-item>
  </v-carousel>
</v-flex>

Vuetify的多线卡轮播卡

1 个答案: