vue 多图鼠标移入切换其他图片移出切换原来的图片

在Vue.js中，你可以利用`v-bind`指令结合`:style`属性和JavaScript事件监听来实现多图鼠标移入/移出时切换图片的效果。首先，你需要准备一些图片作为数据源，并且给每个图片元素绑定一个唯一的`src`和一个表示当前状态的`active`标志。

HTML部分示例：

<template>
  <div id="image-container">
    <img v-for="(item, index) in images" :key="index" :src="item.src" :alt="item.alt"
         @mouseenter="handleEnter(index)" @mouseleave="handleLeave(index)">
  </div>
</template>

然后，在Vue组件的script部分编写处理方法：

export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg', alt: 'Image 1' },
        { src: 'image2.jpg', alt: 'Image 2' },
        // 添加更多图片...
      ],
    };
  },
  methods: {
    handleEnter(index) {
      this.images.forEach((img, i) => {
        img.active = (i === index);
      });
    },
    handleLeave(index) {
      this.images[index].active = false;
      this.$nextTick(() => {
        this.images.find(img => !img.active).active = true;
      });
    },
  },
};

当用户将鼠标悬停在某张图片上时，`handleEnter`方法会改变所有图片的`active`状态，使其只有当前图片变为`true`；而`handleLeave`则是在鼠标离开后恢复原状，再次激活第一个未激活的图片。