我遇到了一个似乎很常见的问题,但我可以克服它。
我有一个 API 查询,它返回一个对象列表。
我想将我的页面显示为填充内容的卡片网格。
我希望网格有 5 列,行数将适应列表中元素的数量。
我能弄清楚如何实现它。
例如:我有一个查询返回
items[
{"id":1,"title":"title1,"description":"description1"}
{"id":2,"title":"title2,"description":"description2"}
{"id":3,"title":"title3,"description":"description3"}
{"id":4,"title":"title4,"description":"description4"}
{"id":5,"title":"title5,"description":"description5"}
{"id":6,"title":"title6,"description":"description6"}
{"id":7,"title":"title7,"description":"description7"}
]
我的网格由 7 个元素组成,系统地有 5 列和自适应行,例如:
如果我的查询返回例如 14 个元素,布局应调整为如下所示:
我能得到的最接近的代码是。
<v-container class="mt-2">
<h1>Top Rated views</h1>
<v-row v-for="n in gridDivider" :key="n" class="n === 1 ? 'mb-6' : ''">
<v-col v-for="(item,index) in Items" :key="index">
<v-card class="mx-auto" max-width="300">
<v-img
class="white--text align-end"
height="200px"
src="item.avatar"
>
<v-card-title>anything as text</v-card-title>
</v-img>
<v-card-subtitle class="pb-0"> Number 10 </v-card-subtitle>
<v-card-text class="text--primary">
<div>Whitehaven Beach</div>
<div>Whitsunday Island, Whitsunday Islands</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
感谢您的帮助
如果您这样更改
v-row
和 v-col
声明就可以完成:
<v-row class="five-cols">
<v-col v-for="(item,index) in Items" :key="index">
...
并使用
CSS 网格布局创建 CSS 类
five-cols
:
.five-cols {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
示例 位于 CodePen
您可以遵循以下示例:
<v-container fluid>
<v-layout row wrap>
<v-flex v-for="i in 6" :key="i" xs12 sm6 md4 ld3>
<img :src="`https://randomuser.me/api/portraits/men/${i + 20}.jpg`" class="image" alt="lorem" width="100%" height="100%">
</v-flex>
</v-layout>
</v-container>