vue 鼠标事件经过显示隐藏适合二维码

最新推荐文章于 2024-07-05 11:50:42 发布

yhd1998

最新推荐文章于 2024-07-05 11:50:42 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/yhd1998/article/details/109002630

版权

vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的基本示例，通过绑定mouseover和mouseleave事件来控制页面上一个元素的显示与隐藏。该示例展示了如何利用Vue.js的数据绑定特性实现交互式效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <style type="text/css">
           .y1{
               width: 500px;
               height: 500px;
               background-color: #00FFFF;
               float: left;
           }
           .y2{
               width: 40%;
               height: 100px;
               background-color: #23527C;
               float: left;
           }
           .y3{
               width: 40%;
               height: 100px;
               background-color: #FFE4C4;
               float: left;
               margin-left: 80px;

           }
       </style>
   </head>
   <body>
       <div id="app">
           <div class="y1">
               
               <div class="y2" @mouseover="mouseover" @mouseleave="mouseleave">

               </div>
               
               <div class="y3" v-show="yc">
                   3
               </div>
           </div>
       </div>
   </body>
   <script type="text/javascript">
       var app = new Vue({
       el: '#app',
       data: {
           yc:false
       },
       methods: {
           mouseover(){ // 鼠标移入事件mouseover
               this.yc = true
           },
           mouseleave(){ // 鼠标移出事件mouseleave
               this.yc = false
           }
       }
       })
   </script>
</html>