vue写一个图片浏览的页面

以下是一个简单的Vue图片浏览页面的示例代码：

<template>
  <div class="gallery">
    <div class="container">
      <div v-for="(image, index) in images" :key="index" class="image-container">
        <img :src="image.url" class="image" @click="openModal(index)" />
      </div>
    </div>
    <div class="modal" v-show="showModal">
      <span class="close" @click="closeModal">&times;</span>
      <img :src="images[currentImageIndex].url" class="modal-image" />
      <div class="navigation">
        <div class="prev" @click="prevImage">&#10094;</div>
        <div class="next" @click="nextImage">&#10095;</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'path/to/image1.jpg' },
        { url: 'path/to/image2.jpg' },
        { url: 'path/to/image3.jpg' },
        { url: 'path/to/image4.jpg' },
        { url: 'path/to/image5.jpg' }
      ],
      showModal: false,
      currentImageIndex: 0
    };
  },
  methods: {
    openModal(index) {
      this.showModal = true;
      this.currentImageIndex = index;
    },
    closeModal() {
      this.showModal = false;
    },
    prevImage() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--;
      }
    },
    nextImage() {
      if (this.currentImageIndex < this.images.length - 1) {
        this.currentImageIndex++;
      }
    }
  }
};
</script>

<style>
.gallery {
  margin: 0 auto;
  max-width: 800px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.image-container {
  margin: 10px;
}

.image {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.close {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  color: #f1f1f1;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #f44336;
  text-decoration: none;
  cursor: pointer;
}

.modal-image {
  display: block;
  margin: auto;
  max-height: 80%;
  max-width: 80%;
}

.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.prev,
.next {
  cursor: pointer;
  user-select: none;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  border-radius: 50%;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
</style>

该代码使用Vue的组件化思想，展示了一个简单的图片浏览器。在`data`中定义了一个`images`数组，其中包含了多个图片的路径。在`methods`中定义了打开和关闭模态框、上一张和下一张图片的方法。在模板中，使用`v-for`指令循环遍历`images`数组，展示所有的图片，并且给图片添加点击事件，点击图片后会打开模态框，展示当前点击的图片。在模态框中，展示当前图片、上一张图片和下一张图片的导航按钮。