Vue中使用嵌套v-for实现图片网格布局

要实现你需要的嵌套网格布局并通过v-for遍历图片数组，核心是先把图片路径数组按每组3张（对应原布局的内层grid容器数量）分组，再通过两层v-for分别渲染外层分组容器和内层图片元素。

1. 组件数据与分组逻辑 #

在组件的data中定义图片路径数组，再通过computed属性将数组按指定大小分组：

<script>
export default {
  data() {
    return {
      // 图片路径数组
      imagePaths: [
        'assets/images/image001.jpg',
        'assets/images/image002.jpg',
        'assets/images/image003.jpg',
        'assets/images/image004.jpg',
        'assets/images/image005.jpg',
        'assets/images/image006.jpg'
      ],
      // 每个内层grid容器的图片数量
      groupSize: 3
    }
  },
  computed: {
    groupedImages() {
      const imageGroups = []
      // 循环切割数组，生成分组
      for (let i = 0; i < this.imagePaths.length; i += this.groupSize) {
        imageGroups.push(this.imagePaths.slice(i, i + this.groupSize))
      }
      return imageGroups
    }
  }
}
</script>

2. 模板中的v-for渲染 #

保留原布局的Tailwind样式类，通过两层v-for分别渲染分组容器和图片：

<template>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <!-- 外层遍历分组，生成内层grid容器 -->
    <div class="grid gap-4" v-for="(group, groupIndex) in groupedImages" :key="`image-group-${groupIndex}`">
      <!-- 内层遍历每组图片，生成img元素 -->
      <div v-for="(imgPath, imgIndex) in group" :key="`image-${groupIndex}-${imgIndex}`">
        <img
          class="h-auto max-w-full rounded-lg"
          :src="imgPath"
          :alt="`图片 ${groupIndex * groupSize + imgIndex + 1}`"
        />
      </div>
    </div>
  </div>
</template>

关键说明 #

• 分组逻辑通过computed实现，保证数据响应式，图片数组变化时分组会自动更新
• 两层v-for都添加了唯一的key值，符合Vue列表渲染的最佳实践
• 动态绑定:src到图片路径，:alt可根据索引生成有意义的描述，也可以留空
• 原布局的样式类完全保留，移动端两列、桌面端四列的布局效果和原代码一致

内容的提问来源于stack exchange，提问作者lunacafu