vue图片预览

<template>
  <div>
    <img :src="currentImage" alt="Preview" v-if="currentImage" style="max-width: 100%; max-height: 500px;" />
    <button @click="openImage(index)" v-for="(image, index) in images" :key="index">
      Preview Image {{ index + 1 }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ],
      currentImage: null
    };
  },
  methods: {
    openImage(index) {
      this.currentImage = this.images[index];
    }
  }
};
</script>

<style scoped>
/* Add some basic styling */
button {
  margin: 5px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 img 标签来显示当前预览的图片，v-if 指令确保只有在 currentImage 存在时才显示图片。
   • 使用 v-for 循环生成多个按钮，每个按钮对应一个图片，点击按钮会调用 openImage 方法。

2. 脚本部分 (<script>):

   • data 函数返回一个对象，包含两个属性：
     • images: 一个数组，存储图片的 URL。
     • currentImage: 当前正在预览的图片 URL，默认为 null。
   • methods 中定义了 openImage 方法，接受一个索引参数，并将对应的图片 URL 赋值给 currentImage。

3. 样式部分 (<style scoped>):

   • 给按钮添加了一些基本的样式，使它们之间有间距。

这个示例展示了如何使用 Vue.js 实现一个简单的图片预览功能。