vue点击图片时实现左右切换翻页效果，手写代码

在Vue中实现点击图片左右切换的翻页效果，我们可以创建一个简单的组件，使用`v-on:click`监听图片的点击事件，并通过计算属性控制当前显示的图片索引。以下是手写的一个简化的示例：

<template>
  <div class="flip-book">
    <button @click="prevPage" v-if="hasPrev"> Prev </button>
    <img :src="currentPage.src" alt="flip page" v-bind:class="{ active: isCurrent }" />
    <button @click="nextPage" v-if=" hasNext "> Next </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'], // 图片数组
      currentPage: { src: this.images[0] }, // 当前页面
      currentIndex: 0, // 当前图片索引
      hasNext: false,
      hasPrev: false,
    };
  },
  computed: {
    isCurrent() {
      return this.currentIndex === this.images.length - 1 ? !this.hasNext : true;
    },
  },
  methods: {
    prevPage() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.hasPrev = this.currentIndex > 0;
        this.hasNext = this.currentIndex < this.images.length - 1;
      }
    },
    nextPage() {
      if (this.currentIndex < this.images.length - 1) {
        this.currentIndex++;
        this.hasPrev = this.currentIndex > 0;
        this.hasNext = this.currentIndex < this.images.length - 1;
      }
    },
  },
};
</script>

<style scoped>
.flip-book {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.active img {
  transition: transform 0.5s ease;
}

.active {
  transform: rotateY(180deg);
}

.prev, .next {
  cursor: pointer;
  padding: 5px 10px;
}
</style>

在这个例子中，我们定义了一个包含几张图片的数组，并使用`currentIndex`来跟踪当前显示的图片。当用户点击“Prev”或“Next”按钮时，我们会相应地更新`currentPage`的索引，同时更新`hasPrev`和`hasNext`的状态。