for循环遍历方式：
1 <template> 2 <div class="container"> 3 <img 4 v-for="(image, index) in images" 5 :key="index" 6 class="image" 7 :class="{ zoomed: image.hovered }" 8 :src="image.src" 9 :alt="image.alt" 10 @mouseover="zoomIn(image)" 11 @mouseleave="zoomOut(image)" 12 > 13 </div> 14 </template> 15 16 <script> 17 import { ref } from 'vue'; 18 19 export default { 20 name: 'App', 21 setup() { 22 const images = ref([ 23 { 24 src: './path/to/your/image1.jpg', 25 alt: 'Image 1', 26 hovered: false, 27 }, 28 { 29 src: './path/to/your/image2.jpg', 30 alt: 'Image 2', 31 hovered: false, 32 }, 33 // Add more images as needed 34 ]); 35 36 const zoomIn = (image) => { 37 image.hovered = true; 38 }; 39 40 const zoomOut = (image) => { 41 image.hovered = false; 42 }; 43 44 return { 45 images, 46 zoomIn, 47 zoomOut, 48 }; 49 }, 50 }; 51 </script> 52 53 <style scoped> 54 .container { 55 display: flex; 56 justify-content: center; 57 align-items: center; 58 height: 100vh; 59 } 60 61 .image { 62 transition: transform 0.3s; 63 } 64 65 .zoomed { 66 transform: scale(1.2); 67 } 68 </style>
在这个示例中，我们通过一个数组 images 来存储图片对象，每个对象包含图片的路径、替代文本和鼠标悬停状态。通过 v-for 指令遍历 images 数组，动态生成多张图片。
zoomIn 和 zoomOut 方法在鼠标悬停和离开时更新对应图片对象的 hovered 属性，通过添加或移除 zoomed 类来控制放大效果。
请确保将实际的图片路径替换为你自己的图片路径。你可以根据需要修改数组 images 的内容，增加或删除更多的图片对象。
非常抱歉给您带来的困扰，感谢您的理解。
不想使用for循环，代码如下：
1 <template> 2 <div class="container"> 3 <img 4 ref="image1" 5 class="image" 6 :class="{ zoomed: currentImage === 'image1' }" 7 src="./path/to/your/image1.jpg" 8 alt="Image 1" 9 @mouseover="zoomIn('image1')" 10 @mouseleave="zoomOut('image1')" 11 > 12 13 <img 14 ref="image2" 15 class="image" 16 :class="{ zoomed: currentImage === 'image2' }" 17 src="./path/to/your/image2.jpg" 18 alt="Image 2" 19 @mouseover="zoomIn('image2')" 20 @mouseleave="zoomOut('image2')" 21 > 22 23 <!-- 添加更多的图片 --> 24 25 </div> 26 </template> 27 28 <script> 29 import { ref } from 'vue'; 30 31 export default { 32 name: 'App', 33 setup() { 34 const currentImage = ref(''); 35 36 const zoomIn = (imageId) => { 37 currentImage.value = imageId; 38 }; 39 40 const zoomOut = () => { 41 currentImage.value = ''; 42 }; 43 44 return { 45 currentImage, 46 zoomIn, 47 zoomOut, 48 }; 49 }, 50 }; 51 </script> 52 53 <style scoped> 54 .container { 55 display: flex; 56 justify-content: center; 57 align-items: center; 58 height: 100vh; 59 } 60 61 .image { 62 transition: transform 0.3s; 63 } 64 65 .zoomed { 66 transform: scale(1.2); 67 } 68 </style>
在这个示例中，我们手动添加了两张图片，并为每个图片指定了一个 ref 属性用于在代码中引用它们。每张图片都有一个唯一的 imageId，通过 currentImage 变量来跟踪当前放大的图片。
当鼠标悬停在图片上时，调用 zoomIn 方法，并传入对应的 imageId 来设置当前放大的图片。离开时，调用 zoomOut 方法来取消放大效果。
你可以根据需要添加更多的图片，只需复制并修改相应的代码块即可。
请确保将实际的图片路径替换为你自己的图片路径。