使用vue在单击时放大单个图像

<template>
  <div>
    <img :src="imageSrc" @click="zoomImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path_to_image.jpg'
    }
  },
  methods: {
    zoomImage() {
      // 在这里实现放大图像的逻辑
    }
  }
}
</script>

<template>
  <div>
    <img :src="imageSrc" :style="{ width: zoomedWidth, height: zoomedHeight }" @click="zoomImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path_to_image.jpg',
      zoomedWidth: '200px',
      zoomedHeight: '200px'
    }
  },
  methods: {
    zoomImage() {
      this.zoomedWidth = '400px';
      this.zoomedHeight = '400px';
    }
  }
}
</script>