卡显示Vue JS

debugcn 发表于 Dev

永恒

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

目前，它是这样的：

人

~~应该这样做：~~

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奇偶校验，但是如果每行的项目数为偶数，则反转偶数行的条件。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

卡显示Vue JS

卡显示Vue JS

Vue JS无法显示数据

在Vue.js中显示整个对象

Vue JS数据未显示在模板上

Vue.js devtools没有显示

（VUE.js）未显示变体数组

插槽未显示-Vue.js

Vue Js在qoutes中显示对象

Vue.js过渡无法显示模式

Vue.js $ set不更新显示

Vue.js显示/隐藏条件

如何使用 vue js 显示以下值？

如何使用 Vue.js 显示它？

在 vue.js 中显示图像

Vue,js 显示来自 json 的数据

vue js 无法正确显示 props 组件

Dropzone.js不在vue-js-modal中显示

如何将卡从“待处理”选项卡添加到“已批准”？Vue.js

Vue.js如何使用选项卡加载不同的组件

如何在打开滑块的每个选项卡时显示JS警报？

如何在Angular JS的新选项卡上显示图像或PDF文件？

您可以在React JS应用程序的新选项卡中显示PDF文件吗

使用js同时显示两个ul选项卡

如果链接在新选项卡/窗口中打开，则 MEAN.JS 视图不显示

显示下一个选项卡引导程序角度 js

角度材料选项卡内容 c3js 图表未显示

防止Vue.js在慢速客户端上显示括号

Vue.js组件未在页面上直观显示

如何在vue.js中显示嵌套对象

如何在vue.js中显示富文本内容？