vue实现组件循环图片

使用 v-for 循环渲染图片列表

在 Vue 中可以通过 v-for 指令动态循环渲染图片列表。假设数据源是一个包含图片路径的数组：

<template>
  <div class="image-gallery">
    <img 
      v-for="(image, index) in images" 
      :key="index" 
      :src="image.url" 
      :alt="image.alt"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: '/path/to/image1.jpg', alt: '描述文字1' },
        { url: '/path/to/image2.jpg', alt: '描述文字2' },
        { url: '/path/to/image3.jpg', alt: '描述文字3' }
      ]
    }
  }
}
</script>

动态绑定本地图片资源

当需要循环显示项目本地的静态图片时，需要使用 require 语法：

<template>
  <div>
    <img 
      v-for="(img, i) in localImages" 
      :key="i" 
      :src="img.src" 
      :alt="img.text"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      localImages: [
        { src: require('@/assets/image1.png'), text: '图片1' },
        { src: require('@/assets/image2.png'), text: '图片2' }
      ]
    }
  }
}
</script>

封装为可复用组件

将图片循环逻辑封装成可复用组件：

<!-- ImageCarousel.vue -->
<template>
  <div class="carousel">
    <div 
      v-for="(item, idx) in items" 
      :key="idx" 
      class="carousel-item"
    >
      <img :src="item.image" :alt="item.title">
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

<style scoped>
.carousel {
  display: flex;
  overflow-x: auto;
}
.carousel-item {
  flex: 0 0 auto;
  margin-right: 15px;
}
</style>

结合过渡动画效果

为图片循环添加过渡动画：

<template>
  <transition-group name="fade" tag="div" class="image-container">
    <img 
      v-for="img in currentImages" 
      :key="img.id" 
      :src="img.src"
      @click="handleClick(img.id)"
    >
  </transition-group>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
</style>

实现自动轮播效果

结合定时器实现自动轮播：

export default {
  data() {
    return {
      images: [...],
      currentIndex: 0,
      interval: null
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex]
    }
  },
  mounted() {
    this.startCarousel()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    startCarousel() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.images.length
      }, 3000)
    },
    pauseCarousel() {
      clearInterval(this.interval)
    }
  }
}

响应式图片布局

使用 CSS Grid 实现响应式图片布局：

<template>
  <div class="responsive-grid">
    <div 
      v-for="(photo, index) in photos" 
      :key="index" 
      class="grid-item"
    >
      <img :src="photo.url" :alt="photo.caption">
    </div>
  </div>
</template>

<style>
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 15px;
}
.grid-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>