时间戳

首页 > 解决方案 > 如何在 Vuejs 中并排显示 vx-cards

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

问题描述

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

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

标签： vue.jsdisplaycard

解决方案

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

推荐阅读