在我的 vue/vuetify 应用程序中,我收集了两种尺寸的卡片,小(6 列)和大(12 列)。例如:
cards = [
{ cols: 6, text: 'Small card' },
{ cols: 12, text: 'Large card' },
{ cols: 6, text: 'Small card' },
{ cols: 12, text: 'Large card' },
{ cols: 6, text: 'Small card' },
];
如果我像这样遍历卡片:
<v-col v-for="card in cards" :cols="card.cols">
<v-card>{{ card.text }}</v-card>
</v-col>
我会得到这样的布局:
一个解决方案可能是事先在我的脚本中创建一个有序列表,以正确的顺序放置卡片。但我想知道是否有更合适或更喜欢的 ui 框架方式来实现这一目标?