写个 vue3 图片预览组件

最新推荐文章于 2024-08-02 15:58:01 发布

或困

最新推荐文章于 2024-08-02 15:58:01 发布

阅读量171

点赞数

文章标签： javascript vue.js 前端 html css

本文链接：https://blog.csdn.net/weixin_42601134/article/details/129606722

版权

Vue3 组件图片预览计算属性数组操作

关键词由CSDN通过智能技术生成

下面是一个简单的 Vue3 图片预览组件的示例代码：

<template>
  <div>
    <img :src="currentImage" alt="Preview" />
    <button @click="prevImage">Prev</button>
    <button @click="nextImage">Next</button>
  </div>
</template>

<script>
export default {
  name: 'ImagePreview',
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      currentIndex: 0
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex]
    }
  },
  methods: {
    prevImage() {
      this.currentIndex = (this.currentIndex + this.images.length - 1) % this.images.length
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
    }
  }
}
</script>