如何在 Vuejs 中并排显示 vx-cards

Question

我实际上是想并排显示卡片，我正在使用 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>

目前我的内容是一个接一个（向下）显示的，但我想要并排显示内容，谁能告诉我该怎么做。

Answer 1

将 .vx-row class 应用到 循环外 的元素，然后将 .vx-col class 应用到循环之外的元素由循环插入。

<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>

如何在 Vuejs 中并排显示 vx-cards

How to display vx-cards side by side in Vuejs

vue.js

display

card