1

我实际上希望并排显示卡片,我正在使用 v-for 来获取内容。

这是我的代码:

   <div v-for="info in infos" v-bind:key="info.id">
        <div class="vx-col w-full md:w-1/2 mb-base">
          <vx-card>
            ...
            My contents goes here
            ... 
          </vx-card>
        </div>
    </div>

我试过这样:

        <div v-for="info in infos" v-bind:key="info.id">
          <div class="vx-row">                               <--- Here what i tried to do
            <div class="vx-col w-full md:w-1/2 mb-base">
              <vx-card>
                ...
                My contents goes here
                ... 
              </vx-card>
            </div>
           </div>
        </div>

目前我的内容一个接一个(向下)显示,但我想要并排显示的内容,谁能告诉我该怎么做。

4

1 回答 1

1

.vx-row类应用于循环的元素,然后将.vx-col类应用于循环插入的元素。

<div class="vx-row"> 
  <div v-for="info in infos" class="vx-col" v-bind:key="info.id">
    <div class="w-full md:w-1/2 mb-base">
      <vx-card>
        ...
        My contents goes here
        ... 
      </vx-card>
    </div>
  </div>
</div>

您希望输出如下(简化):

<div class="vx-row">
  <div class="vx-col">...</div>
  <div class="vx-col">...</div>
  <div class="vx-col">...</div>
  <div class="vx-col">...</div>
  ...
</div>

这是一个更简洁的解决方案:

<div class="vx-row"> 
  <vx-card
    v-for="info in infos"
    class="vx-col w-full md:w-1/2 mb-base"
    :key="info.id"
  >
    ...
    My contents goes here
    ... 
  </vx-card>
</div>
于 2021-01-13T03:59:01.240 回答