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>

用英语表示为：根据img奇偶返回text或index，但如果每行的项目数为偶数，则在偶数行上反转条件。

卡显示Vue JS

1 个答案: