vue2 三个div 鼠标滑到当前的div 使滑到的div加一个黑边框 鼠标划走 删除黑边框

在Vue 2中，你可以通过CSS和JavaScript结合来实现这样的效果。下面是一个简单的例子，假设你有三个`<div>`元素，我们可以利用`v-show`或`v-if`指令以及`@mouseenter`和`@mouseleave`事件监听器来控制边框显示。

HTML部分：

<div v-for="(item, index) in 3" :key="index" @mouseenter="showBorder(index)" @mouseleave="hideBorder(index)">
  Div{{ index + 1 }}
</div>

CSS部分：

div {
  transition: border 0.3s ease;
}

.active-border {
  border: 1px solid black;
}

JS部分：

export default {
  data() {
    return {
      borderedItems: [],
    };
  },
  methods: {
    showBorder(index) {
      this.borderedItems.push(index);
      this.$refs[`div${index}`].classList.add('active-border');
    },
    hideBorder(index) {
      const indexToRemove = this.borderedItems.indexOf(index);
      if (~indexToRemove) {
        this.borderedItems.splice(indexToRemove, 1);
        this.$refs[`div${index}`].classList.remove('active-border');
      }
    },
  },
};

在这个例子中，当鼠标滑入某一个`div`时，对应的索引会被添加到`borderedItems`数组里，然后给这个`div`加上`active-border`类名，给它加上黑色边框。当鼠标离开时，如果该`div`的索引还在`borderedItems`里，就从数组中移除并删除边框。