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

在 Vue.js 2 中，你可以通过JavaScript事件监听和Vue的响应式特性来实现在鼠标悬停时给当前的 div 加上黑边框，鼠标移开则删除这个效果。这里是一个简单的示例：

首先，你需要在HTML模板中创建三个`<div>`元素，并给他们添加一个通用的`hoverClass`属性，用于切换样式：

<div v-for="(item, index) in items" :key="index" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
  <div class="content" :class="{ active: item === hoveredItem }">{{ item.text }}</div>
</div>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Div 1', index: 0 },
        { text: 'Div 2', index: 1 },
        { text: 'Div 3', index: 2 },
      ],
      hoveredItem: null,
    };
  },
  methods: {
    handleMouseEnter(index) {
      this.hoveredItem = index;
      // 添加黑边框样式
      this.$refs[`content${index}`].classList.add('border-on');
    },
    handleMouseLeave(index) {
      if (this.hoveredItem === index) {
        this.hoveredItem = null; // 清除hover状态
        // 移除黑边框样式
        this.$refs[`content${index}`].classList.remove('border-on');
      }
    },
  },
};
</script>

<style scoped>
.content {
  /* 基础样式 */
}

.border-on {
  border: 1px solid black; /* 黑色边框样式 */
}
</style>

在这个例子中，当鼠标进入某个 div 时，对应的 `handleMouseEnter` 方法会被调用，设置 `hoveredItem` 为当前 div 的索引，并添加 `.border-on` 类来应用黑边框。当鼠标离开时，`handleMouseLeave` 方法会检查是否是刚刚悬停过的 div，如果是，则移除黑边框样式。