如何在 vue.js/nuxt.js 中使用条件循环显示数据？

Question

我附加了一张图片，我想使用 vue.js/nuxt.js 在列中显示一个复选框 .我想使用 for 循环显示所有复选框数据，并在一列中显示 3 个项目。

<div class="row">

    <div class="col-xxs-6 col-sm col-lg col-xl">

        <ul>

            <li>checkbox</li>
            <li>checkbox</li>
            <li>checkbox</li>

        </ul>

    </div>
    <div class="col-xxs-6 col-sm col-lg col-xl">

        <ul>

            <li>checkbox</li>
            <li>checkbox</li>
            <li>checkbox</li>

        </ul>

    </div>

</div>

Answer 1

您可以遍历您的复选框数组，然后在 CSS 网格上显示这些复选框。

.grid-box {
  display: grid;
  grid-template-colums: repeat(5, 1fr);
  grid-gap: 10px;
}

<div class="grid-box">
  <Checkbox v-for="(checkbox, index) in checkboxList" :key="index" />
</div>

您可以阅读有关 CSS-Grid 的更多信息here。