zoukankan      html  css  js  c++  java
  • 在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      100%;
    46     height: 300px;
    47     background-color: lightcoral;
    48     p {
    49       color: limegreen;
    50     }
    51   }
    52 }
    53 </style>
  • 相关阅读:
    关于DOM与BOM
    常用单位及颜色表
    关于Grid
    form表单
    自我介绍
    python——3种字符串反转方法
    JavaScript 正则表达式
    关于JavaScript的DOM和BOM
    CSS颜色表示的几种方式
    CSS的常用单位介绍
  • 原文地址:https://www.cnblogs.com/qdjj/p/13190023.html
Copyright © 2011-2022 走看看