Javascript 关闭并重新打开vue js for循环中的父div

我正在使用VueJS渲染此组件。我在

图像

数据中有一个图像URL数组，我在一个组件（引导卡）中循环它，我想要的是，我想在循环的每三次迭代中关闭父

，然后再次打开它，这样我就可以在1

中有一组3个

因此，对于9个图像，我将在每个块中分别添加3个

和3个

如何在Vue JS中实现这一点？

使用a将

图像

重组为3x3数组（名为“

图像组

”）：

导出默认值{
计算：{
imageGroups（）{
设curr=-1
常量组=[]
const images=this.images
for（设i=0；i

然后，在模板中的

imageGroups

上使用嵌套的

v-for

，以呈现组：

---

由于您使用的是Bootstrap Vue，因此可以避免以编程方式进行，并利用库的系统

创建一个

并迭代

元素，这些元素将根据行的

cols

属性进行自我排列。您还可以在不同的屏幕大小断点处使用不同的列数量

下面的示例在最小断点处使用1列，其余断点使用3列：

不需要JavaScript

<div>
  <b-card-group :columns="layout == 'masonry'" :deck="layout == 'grid'">
    <b-card
        v-for="(image, imageIndex) in images"
        :key="imageIndex"
        :img-src="image"
        img-top>
    </b-card>
  </b-card-group>
</div>