如何在 vuetify 的 vue 行中正确对齐项目?
How to align items properly in vue row in vuetify?
我有产品列表,我想在页面上显示它们
<v-tab-item
<v-row>
<Product v-for="n in 10" :key="n"/>
</v-row>
<v-tab-item
这是输出
List of products
如何只制作(比如连续最多 6 个产品)并且每个产品之间的利润率相同?
检查我制作的这个codesandbox:https://codesandbox.io/s/stack-70701639-f1uc3?file=/src/components/GridExample.vue
你的意思是这样的?
如果,那么。而不是在 Product
组件中使用 v-for
,而是将其包装在 v-col
标记中,并在其中使用 for 循环。这样您就可以使用 vuetify's grid system 并使您的设计响应多个视口,就像我在我的示例中所做的那样。
<v-row>
<v-col
v-bind:key="n"
v-for="n in 10"
cols="12"
sm="6"
md="4"
lg="2"
>
<CardItem/>
</v-col>
</v-row>
我有产品列表,我想在页面上显示它们
<v-tab-item
<v-row>
<Product v-for="n in 10" :key="n"/>
</v-row>
<v-tab-item
这是输出 List of products
如何只制作(比如连续最多 6 个产品)并且每个产品之间的利润率相同?
检查我制作的这个codesandbox:https://codesandbox.io/s/stack-70701639-f1uc3?file=/src/components/GridExample.vue
你的意思是这样的?
如果,那么。而不是在 Product
组件中使用 v-for
,而是将其包装在 v-col
标记中,并在其中使用 for 循环。这样您就可以使用 vuetify's grid system 并使您的设计响应多个视口,就像我在我的示例中所做的那样。
<v-row>
<v-col
v-bind:key="n"
v-for="n in 10"
cols="12"
sm="6"
md="4"
lg="2"
>
<CardItem/>
</v-col>
</v-row>