vue实现鼠标悬停图片放大事件

可以使用CSS的`transform: scale`属性来实现鼠标悬停图片放大的效果，配合Vue的事件绑定和计算属性即可。

首先，在模板中使用`v-on`指令绑定`mouseover`和`mouseout`事件，当鼠标悬停在图片上时，将`isHover`属性设置为`true`，当鼠标移开时，将`isHover`属性设置为`false`。

<template>
  <div>
    <img :src="imageUrl" :style="imgStyle" @mouseover="isHover = true" @mouseout="isHover = false">
  </div>
</template>

然后，使用计算属性根据`isHover`属性的值动态计算`imgStyle`属性，当`isHover`为`true`时，将图片放大1.2倍，当`isHover`为`false`时，恢复原大小。

<script>
export default {
  data() {
    return {
      isHover: false
    }
  },
  props: {
    imageUrl: {
      type: String,
      required: true
    }
  },
  computed: {
    imgStyle() {
      return {
        transform: this.isHover ? 'scale(1.2)' : 'scale(1)',
        transition: 'all 0.3s ease' // 添加过渡效果，使放大效果更平滑
      }
    }
  }
}
</script>

这样，当鼠标悬停在图片上时，图片就会放大1.2倍，移开时又会恢复原大小。