vue鼠标悬停事件图片放大

可以使用Vue的`@mouseover`和`@mouseleave`事件来实现鼠标悬停事件，然后使用CSS的`transform`属性来放大图片。

HTML代码：

<template>
  <div class="image-container">
    <img :src="imageUrl" alt="image" @mouseover="enlargeImage" @mouseleave="resetImage" />
  </div>
</template>

CSS代码：

.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-out;
}

.image-container:hover img {
  transform: scale(1.2);
}

JS代码：

export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
    };
  },
  methods: {
    enlargeImage() {
      // do something when mouse over the image
    },
    resetImage() {
      // do something when mouse leaves the image
    },
  },
};

这样当鼠标悬停在图片上时，图片会放大1.2倍。