Vue鼠标移入移出事件

Vue中鼠标移入移出事件

@mouseover和@mouseleave 然后绑定style

 

现在开始代码示例

 

1、给需要使用移入移出事件的添加事件：

@mouseover @mouseleave

2、绑定style  这个 `active` 是绑定名 可以自己随意更换

:style="active"  

3、在 data 里定义 绑定的类名

 data() {
    return {
      msg: "HelloWorld,I am PC",
      active: "",
    };
  },

4、在 methods 里定义事件  要改变内部的元素 通过ref 操作dom

  methods: {
    mouseOver() {
      this.active = "";
      var acps = this.$refs.acp
　　   acps.style.color="red"
    },
    mouseLeave() {
      this.active = "";
      this.$ref.acp.style=''
    }
  }

这样移入移出就完成了

转载于:https://www.cnblogs.com/mica/p/10699805.html