如何在vue.jsnuxt.js中循环显示一个带条件的数据？

Question

我附上了一张图片，我想用vue.jsnuxt.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 此处.