vue鼠标的移入移除事件

Vue中鼠标移入事件@mouseover

Vue中鼠标移出事件@mouseleave

最主要的是绑定对应的style

代码实例

<template>
  <div class="pc">
    <h1>{{ msg }}</h1>
    <div
      class="demo"
      @mouseover="mouseOver"
      @mouseleave="mouseLeave"
      :style="active"
    >
      <p ref="acp">我是内容</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "HelloWorld,I am PC",
      active: "",
    };
  },
  methods: {
    // 移入
    mouseOver() {
      this.active = "background-color:black";
      // 操作dom 获取p标签改变其样式
      var acps = this.$refs.acp
      acps.style.color = "red"
    },
    // 移出
    mouseLeave() {
      this.active = "";
      this.$refs.acp.style=''
    }
  }
};
</script>
<style  scoped>

  .demo {
     100%;
    height: 300px;
    background-color: lightcoral;
  }
 p {
      color: limegreen;
    }

</style>

总结

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

2.绑定style 这个 active 是绑定名 可以自己随意更换:style="active"

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

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

vue实现文字内容无缝向上滚动，鼠标移入停止滚动，鼠标移开继续滚动

链接