我是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: () => ({
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>
可能可以简化和/或针对不同数量的项目/行进行调整。