vue 2 三个div 鼠标滑过每个div 加一个边框 并可以独立点击

在Vue 2中，你可以使用模板结合JavaScript以及v-on指令来实现这样的功能。首先，你需要创建HTML结构，包含三个div元素，并给每个div添加唯一的ID以便于后续操作：

<div id="div1" v-on:mouseover="addBorder(1)" @click="handleClick(1)">Div 1</div>
<div id="div2" v-on:mouseover="addBorder(2)" @click="handleClick(2)">Div 2</div>
<div id="div3" v-on:mouseover="addBorder(3)" @click="handleClick(3)">Div 3</div>

然后，在你的Vue实例中，定义`addBorder`和`handleClick`方法：

export default {
  name: 'MyComponent',
  data() {
    return {
      borderOn: false, // 初始化鼠标移出边框的状态
    };
  },
  methods: {
    addBorder(index) {
      this.$refs[`div${index}`].classList.add('border-on');
      this.borderOn = true; // 当鼠标滑过时，设置状态为true
    },
    removeBorder(index) {
      this.$refs[`div${index}`].classList.remove('border-on');
      this.borderOn = false; // 当鼠标移开时，设置状态为false
    },
    handleClick(index) {
      console.log(`Clicked on Div ${index}`);
      // 这里可以根据需要执行其他操作，比如改变样式、触发事件等
    },
  },
  mounted() {
    // 如果你想在组件挂载后立即添加边框，可以在mounted钩子里调用一次addBorder方法
    this.addBorder(1);
  },
  beforeDestroy() {
    // 清理处理，例如移除所有div的鼠标移入移出监听
    this.removeBorder(1);
    this.removeBorder(2);
    this.removeBorder(3);
  },
}

在这个例子中，我们使用了`$refs`来引用对应的DOM元素，并通过`classList`动态添加和删除名为“border-on”的CSS类来显示边框。同时，`@click`事件监听了每个div的点击。