在vue中使用划入划出事件

@mouseove

移入事件

@mouseleave

移出事件

 1 <template>
 2   <div class="pc">
 3     <h1>{{ msg }}</h1>
 4     <div
 5       class="demo"
 6       @mouseover="mouseOver"
 7       @mouseleave="mouseLeave"
 8       :style="active"
 9     >
10       <p ref="acp">我是内容</p>
11     </div>
12   </div>
13 </template>
14 
15 <script>
16 export default {
17   name: "HelloWorld",
18   data() {
19     return {
20       msg: "HelloWorld,I am PC",
21       active: "",
22     };
23   },
24   methods: {
25     // 移入
26     mouseOver() {
27       this.active = "background-color:black";
28       // 操作dom 获取p标签改变其样式
29       var acps = this.$refs.acp
30       acps.style.color = "red"
31     },
32     // 移出
33     mouseLeave() {
34       this.active = "";
35       this.$refs.acp.style=''
36     }
37   }
38 };
39 </script>
40 
41 <!-- Add "scoped" attribute to limit CSS to this component only -->
42 <style lang="scss" scoped>
43 .pc {
44   .demo {
45     width: 100%;
46     height: 300px;
47     background-color: lightcoral;
48     p {
49       color: limegreen;
50     }
51   }
52 }
53 </style>