vue遍历图片鼠标悬停到哪张图片哪张图片就放大

您好！要实现鼠标悬停到哪张图片哪张图片就放大，可以使用Vue的指令和CSS样式来实现。具体实现步骤如下：

1. 在Vue组件中，使用v-for指令遍历图片列表，并绑定每张图片的索引值：

<template>
  <div class="image-list">
    <img v-for="(image, index) in imageList" :src="image.url" :key="index" :data-index="index" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
  </div>
</template>

2. 在CSS样式中，设置图片的初始大小和位置，并添加:hover伪类来实现鼠标悬停时的放大效果：

.image-list img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  transition: all 0.3s ease-in-out;
}

.image-list img:hover {
  width: 120px;
  height: 120px;
}

3. 在Vue组件的methods中，定义handleMouseOver和handleMouseLeave方法来处理鼠标悬停和离开事件。在handleMouseOver方法中，获取当前鼠标悬停的图片索引值，并将该图片的大小设置为放大的状态；在handleMouseLeave方法中，将所有图片的大小还原为初始状态。

<script>
export default {
  data() {
    return {
      imageList: [
        { url: 'image1.jpg' },
        { url: 'image2.jpg' },
        { url: 'image3.jpg' }
      ]
    }
  },
  methods: {
    handleMouseOver(event) {
      const index = event.target.dataset.index
      event.target.style.width = '120px'
      event.target.style.height = '120px'
    },
    handleMouseLeave(event) {
      const images = event.target.parentNode.getElementsByTagName('img')
      for (let i = 0; i < images.length; i++) {
        images[i].style.width = '100px'
        images[i].style.height = '100px'
      }
    }
  }
}
</script>

这样，在Vue组件中遍历图片时，鼠标悬停到哪张图片哪张图片就会放大。希望能帮到您！