引言

前期准备

在开始之前，请确保您的环境中已经安装了Vue.js。可以通过以下命令来安装：

npm install vue

或者使用CDN链接直接在HTML文件中引入：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

常用方法

1. 使用v-for指令

2. 动态绑定src属性

3. 处理图片索引

Demo案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 图片循环展示实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
  .image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  .image-container img {
    width: 100%;
    transition: transform 0.5s ease;
  }
</style>
</head>
<body>
<div id="app">
  <div class="image-container">
    <img v-for="(image, index) in images" :key="index" :src="image" v-show="currentIndex === index">
  </div>
  <button @click="nextImage">下一张</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg',
    ],
    currentIndex: 0,
    maxIndex: 0
  },
  methods: {
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
      this.maxIndex = this.images.length - 1;
    }
  }
});
</script>
</body>
</html>

总结