当前位置：首页 > VUE

vue实现每组多个图片

2026-02-23 22:28:19VUE

Vue 实现每组多个图片的展示

在 Vue 中实现每组多个图片的展示，可以通过多种方式完成。以下是几种常见的方法：

使用 `v-for` 循环渲染图片组

通过 v-for 循环遍历图片数组，动态生成图片组。适用于图片数据以数组形式存储的情况。

<template>
  <div class="image-group">
    <div v-for="(group, index) in imageGroups" :key="index" class="group">
      <img v-for="(image, imgIndex) in group" :key="imgIndex" :src="image.src" :alt="image.alt">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageGroups: [
        [
          { src: 'image1.jpg', alt: 'Image 1' },
          { src: 'image2.jpg', alt: 'Image 2' }
        ],
        [
          { src: 'image3.jpg', alt: 'Image 3' },
          { src: 'image4.jpg', alt: 'Image 4' }
        ]
      ]
    }
  }
}
</script>

<style>
.image-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.group {
  display: flex;
  gap: 10px;
}
</style>

使用 CSS Grid 布局

通过 CSS Grid 布局可以更灵活地控制每组图片的排列方式。

<template>
  <div class="image-grid">
    <div v-for="(group, index) in imageGroups" :key="index" class="grid-group">
      <img v-for="(image, imgIndex) in group" :key="imgIndex" :src="image.src" :alt="image.alt">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageGroups: [
        [
          { src: 'image1.jpg', alt: 'Image 1' },
          { src: 'image2.jpg', alt: 'Image 2' },
          { src: 'image3.jpg', alt: 'Image 3' }
        ],
        [
          { src: 'image4.jpg', alt: 'Image 4' },
          { src: 'image5.jpg', alt: 'Image 5' }
        ]
      ]
    }
  }
}
</script>

<style>
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.grid-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
</style>

使用第三方组件库

如果项目中使用如 Element UI、Vuetify 等组件库，可以利用其提供的布局组件快速实现图片分组。

以 Element UI 为例：

<template>
  <el-row :gutter="20">
    <el-col v-for="(group, index) in imageGroups" :key="index" :span="12">
      <el-row :gutter="10">
        <el-col v-for="(image, imgIndex) in group" :key="imgIndex" :span="6">
          <img :src="image.src" :alt="image.alt" style="width: 100%;">
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      imageGroups: [
        [
          { src: 'image1.jpg', alt: 'Image 1' },
          { src: 'image2.jpg', alt: 'Image 2' }
        ],
        [
          { src: 'image3.jpg', alt: 'Image 3' },
          { src: 'image4.jpg', alt: 'Image 4' }
        ]
      ]
    }
  }
}
</script>

动态加载图片组

如果图片数据需要从后端获取，可以通过异步请求加载图片组。

<template>
  <div v-if="loading">Loading...</div>
  <div v-else class="image-group">
    <div v-for="(group, index) in imageGroups" :key="index" class="group">
      <img v-for="(image, imgIndex) in group" :key="imgIndex" :src="image.src" :alt="image.alt">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageGroups: [],
      loading: true
    }
  },
  async created() {
    try {
      const response = await fetch('api/images/groups');
      this.imageGroups = await response.json();
    } catch (error) {
      console.error('Error fetching image groups:', error);
    } finally {
      this.loading = false;
    }
  }
}
</script>

以上方法可以根据具体需求选择或组合使用，灵活实现 Vue 中每组多个图片的展示效果。

vue实现每组多个图片