62.实现鼠标放在图片上自动放大效果

 1 <template>
 2   <div class="container">
 3     <img
 4       class="image"
 5       :class="{ zoomed: hovered }"
 6       src="./path/to/your/image.jpg"
 7       alt="Image"
 8       @mouseover="hovered = true"
 9       @mouseleave="hovered = false"
10     >
11   </div>
12 </template>
13 
14 <script>
15 import { ref } from 'vue';
16 
17 export default {
18   name: 'App',
19   setup() {
20     const hovered = ref(false);
21     
22     return {
23       hovered,
24     };
25   },
26 };
27 </script>
28 
29 <style scoped>
30 .container {
31   display: flex;
32   justify-content: center;
33   align-items: center;
34   height: 100vh;
35 }
36 
37 .image {
38   transition: transform 0.3s;
39 }
40 
41 .zoomed {
42   transform: scale(1.2);
43 }
44 </style>