vue鼠标悬停图片放大

要实现鼠标悬停图片放大的效果，可以通过以下步骤来完成：

1. 在 Vue 模板中，使用 `v-bind` 绑定图片的样式，在样式中设置图片的宽度和高度。

<template>
  <div>
    <img
      :src="imgSrc"
      :style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"
      @mouseover="handleMouseOver"
      @mouseleave="handleMouseLeave"
    />
  </div>
</template>

2. 在 Vue 实例中，定义图片的初始宽度和高度，以及鼠标悬停时放大的倍数。

<script>
export default {
  data() {
    return {
      imgSrc: '图片地址',
      imgWidth: 200,
      imgHeight: 200,
      scale: 1.2
    }
  },
  methods: {
    handleMouseOver() {
      this.imgWidth = this.imgWidth * this.scale
      this.imgHeight = this.imgHeight * this.scale
    },
    handleMouseLeave() {
      this.imgWidth = 200
      this.imgHeight = 200
    }
  }
}
</script>

3. 在鼠标悬停时，将图片的宽度和高度乘以放大倍数，同时在鼠标离开时还原图片的大小。

这样就可以实现在鼠标悬停时图片放大的效果了。