Vue鼠標移入移出事件

Vue中鼠標移入移出事件

@mouseover和@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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.pc {
  .demo {
    width: 100%;
    height: 300px;
    background-color: lightcoral;
    p {
      color: limegreen;
    }
  }
}
</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=''
    }
  }

這樣移入移出就完成了