Card display vue js

问题描述 投票:0回答:1

我是vue.js的新手,目前正在通过vuetify进行练习。我试图将这种布局放置数小时,但仍然无法解决。有人可以通过解释如何解决此问题来帮助我吗?

我有一个对象数组,其中包含描述和图像。我想在下图中显示它们。enter image description here

第一张卡片,我将显示说明,第二张卡片,将显示图像。更改行(例如第二行)时,我将像第四张卡一样保留图像。第八和第九个将是文本,并从那里继续交替。

<template>
  <div class="home">
    <v-container grid-list-lg>
      <h1>Home</h1>
      <v-layout row>
        <v-flex lg3 v-for="(item, index) in arr" :key="item.id" class="space-bottom">
          <v-card class="mx-auto" max-width="344" outlined>
            <v-list-item three-line>
              <v-list-item-content v-if="index % 2 === 0" height="400px">
                <v-list-item-subtitle>{{item.description}}</v-list-item-subtitle>

                <v-list-item-subtitle class="subtitle-style">
                  <span>
                    <a href="#">Read more</a>
                  </span>
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-hover>
              <template v-slot:default="{ hover }">
                <v-list-item-content v-if="index % 2 !== 0">
                  <img :src="item.imageUrl" />

                  <v-fade-transition>
                    <v-overlay v-if="hover" absolute color="#036358">
                      <v-btn>See more info</v-btn>
                    </v-overlay>
                  </v-fade-transition>
                </v-list-item-content>
              </template>
            </v-hover>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      arr: [
        {
          description: "description 1",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 2",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 3",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 4",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 1",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 1",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 1",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 2",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 3",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 4",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 1",
          imageUrl: "https://via.placeholder.com/100"
        },
        {
          description: "description 1",
          imageUrl: "https://via.placeholder.com/100"
        }
      ]
    };
  }
};
</script>

<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

当前是这样的:enter image description here

javascript html css vue.js vuetify.js
1个回答
0
投票

这应该做:

methods: {
  getCardType(index) {
    return (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength
      ? index % 2 ? 'text' : 'img'
      : index % 2 ? 'img' : 'text'
  }
}

[rowLength4的地方:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data: () => ({
    card: {
      text: 'foo',
      image: 'bar'
    },
    rowLength: 4
  }),
  methods: {
    getCardType(index) {
      return (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength
        ? index % 2 ? 'text' : 'img'
        : index % 2 ? 'img' : 'text'
    }
  }
})
#app {
  display: flex;
  flex-wrap: wrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
  <div v-for="n in 100" class="card" :style="{flex: `1 0 ${100/rowLength}%`}">{{getCardType(n - 1)}}</div>
</div>

可能可以简化和/或针对不同数量的项目/行进行调整。

© www.soinside.com 2019 - 2024. All rights reserved.