vue事件修饰符多个一起使用

分类：vue教程时间：2022-06-06 07:30:36

vue中的事件修饰符有哪些？vue事件修饰符有阻止冒泡stop、阻止默认事件prevent、添加事件侦听器时使用事件捕获模式capture、只当事件在该元素本身触发时触发回调self 、事件只触发一次once这几个主要的vue事件修饰符，他们的具体介绍可以看文章《5个常用的vue事件修饰符》本文是讲vue事件修饰符多个一起使用。

vue事件修饰符多个一起使用

vue事件修饰符多个一起使用实例代码如下：

<!Doctype html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf" />
   <title>vue事件修饰符多个一起使用</title>
   <style type="text/css">
     * {
       margin: 0;
       padding: 0;
     }
     body {
       width: 600px;
       margin: 100px auto;
     }
     .box {
       height: 200px;
       background: red;
       padding: 50px;
     }
   </style>
 </head>
 <body>
   <div id="app">
     <div class="box" @click="box">
       <!-- 阻止冒泡和阻止默认事件 -->
       <a href="https://tangjiusheng.cn" @click.stop.prevent="btn">点我进入首页</a>
     </div>
   </div>
   <script type="text/javascript" src="https://tangjiusheng.cn/vue/lib/vue.min.js"></script>
   <script>
     var vm = new Vue({
       el: '#app',
       data: {},
       methods: {
         box() {
           console.log('这是触发了 box div 的点击事件！')
         },
         btn() {
           console.log('这是触发了 btn 按钮 的点击事件！')
         }
       }
     });
   </script>
 </body>
</html>

点击查看效果：https://tangjiusheng.cn/vue/page20220516.html

说明：要多个事件修饰符一起使用，用链式编程方式这样使用就行。stop事件修饰符阻止了冒泡点击a不是触发box函数，prevent事件修饰符阻止了a的跳转。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.cn/vue/373.html

关注下头条号后，请私信将免费分享给你一份web前端资料！
立即关注

大家都在看