vue-component - 如何使用 v-card 看到 v-row 的效果？

Question

我想做 2x2 v-card 对象。使用 Vuetify

<v-row>
    <v-col>
      <v-btn width="100">asfd</v-btn>
      <v-btn width="100">adsf</v-btn>
    </v-col>
    <v-col>
      <v-card width="100">adsf</v-card>
      <v-card width="100">asdf</v-card>
    </v-col>
  </v-row>

如果v-col中的v-btn，它工作得很好，但是如果我将v-btn更改为v-card，则v-row属性将被忽略。请帮我。

标签： vue-componentvuetify.js

Answer 1

这与vue无关，而是与html有关。

v-btn将在一个 html 按钮中解析，该按钮的 display 属性设置为inline-block，这会将元素放在同一行上。 v-card将在一个 html div 中解析，该 div 的 display 属性设置为block将元素置于彼此之下。

对于定位元素的正确方式，请查看https://vuetifyjs.com/en/styles/flex

<div id="app" >
  <v-app class="d-flex pa2">
    <v-row justify="space-around" align-items="align-stretch">
      <v-card width="50%">adsf</v-card>
      <v-card width="50%">bcde</v-card>
    </v-row>
    <v-row justify="space-around" align-items="align-stretch">
      <v-card width="50%">adsf</v-card>
      <v-card width="50%">bcde</v-card>
    </v-row
  </v-app>
 </div>