卡片展示vue js

Question

我是 vue.js 的新手，目前正在使用 vuetify 进行练习。我试图制作这个布局几个小时，但我仍然卡住了。谁能帮我解释一下如何解决这个问题？

我有一个包含描述和图像的对象数组。我想如下图所示显示它们。

第一张卡片，我将显示描述，第二张卡片，图像。换行时，例如第二行，我会像第四张卡片一样保留图像。第八个和第九个将是文本并从那里继续交替。

<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>

目前是这样的：

Answer 1

应该这样做：

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

rowLength 是4：

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

new Vue({
  el: '#app',
  data: () => ({
    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>

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

这是一个在奇数和偶数列上都保留“chekers”模式的版本：

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

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

new Vue({
  el: '#app',
  data: () => ({
    rowLength: 4
  }),
  methods: {
    getCardType(index) {
      return this.rowLength % 2 ||
      (this.rowLength * 2 + index) % (this.rowLength * 2) >= this.rowLength
      ? index % 2 ? 'text' : 'img'
      : index % 2 ? 'img' : 'text'
    }
  }
})

.columns {
  display: flex;
  flex-wrap: wrap;
}
.card {
  padding: 1rem;
  box-sizing: border-box;
}
.img {
  background-color: #f5f5f5;
}
body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
  <div>Columns: <input type="number" v-model="rowLength"></div>
  <div class="columns">
    <div v-for="n in 100" class="card"
         :style="{flex: `1 0 ${100/rowLength}%`}"
         :class="[getCardType(n - 1)]"
         >{{getCardType(n - 1)}}
    </div>
  </div>
</div>

在英语中，这将是：基于index 奇偶校验返回img 或text，但如果每行的项目数是偶数，则反转偶数行的条件。