Vue事件修饰符（.stop .once .prevent）

最新推荐文章于 2024-04-17 06:57:39 发布

清心悦

最新推荐文章于 2024-04-17 06:57:39 发布

阅读量345

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_53646257/article/details/123241436

版权

这篇博客介绍了Vue.js中用于事件处理的三个修饰符：.stop用于阻止事件冒泡，.once确保事件只触发一次，.prevent则用于阻止默认行为。通过示例代码展示了这些修饰符在实际场景中的应用，帮助开发者更好地理解和运用Vue的事件系统。

摘要由CSDN通过智能技术生成

.stop 阻止冒泡


<div id="app">
    <!-- 事件后加 .stop 阻止冒泡 -->
     <div @click="show('父')">父盒子

           <div @click.stop="show('子')">子盒子</div>
              
     </div>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data:{
            num: 0
        },
        methods:{
            show:function(info){
                    console.log(info);
                    console.log(event.target.innerHTML);
            }
        }

    })
</script>

.once 点击事件将只会触发一次

<div id="app">
     <!-- 点击事件将只会触发一次 -->
     <div @click.once="show">
     <button>A</button>
     <button>B</button>
     <button>C</button>
    </div>

</div>


<script>
    var vm = new Vue({
        el: '#app',
        data:{
            num: 0
        },
        methods:{
            show:function(info){
                    console.log(event.target.innerHTML);
            }
        }

    })
</script>

.prevent 阻止对象默认行为


<div id="app">
    <a @click.prevent="handle()"   href="http://baidu.com">去百度</a>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data:{
            num: 0
        },
        methods:{
            handle:function(){
                console.log('点了链接');
                //阻止对象默认行为
                //event.preventDefault()
            }
        }

    })
</script>