Vue初学07-事件修饰符

最新推荐文章于 2024-01-15 08:40:23 发布

置顶周达

最新推荐文章于 2024-01-15 08:40:23 发布

阅读量174

点赞数 1

分类专栏： vue 文章标签： vue事件修饰符

本文链接：https://blog.youkuaiyun.com/gis_zhouda/article/details/104840403

版权

vue 专栏收录该内容

37 篇文章

订阅专栏

本文深入探讨Vue.js中事件修饰符的使用，包括stop、prevent和键修饰符，解释如何阻止事件冒泡、防止默认行为及仅响应特定键触发的事件。

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

stop修饰符

相当于调用 event.stopPropagation()，阻止事件冒泡

<body>
    <div id="app" @click="divclick">
            <button  @click="buttonclick">button</button>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            methods:{
                buttonclick(){
                     console.log("我是button，我被点击了！");
               },
               divclick(){
                   console.log("我是div，我被点击了！");
               }
            }
        });
    </script>
</body>

正常情况下，如果不用stop修饰符，点击按钮后通过事件冒泡机制，div的点击事件也会触发，结果如下：

给按钮添加stop修饰符以后

<body>
    <div id="app" @click="divclick">
            <button  @click.stop="buttonclick">button</button>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            methods:{
                buttonclick(){
                     console.log("我是button，我被点击了！");
               },
               divclick(){
                   console.log("我是div，我被点击了！");
               }
            }
        });
    </script>
</body>

这语法真是又香又甜~~~效果如下：

prevent修饰符

相当于调用 event.preventDefault()，阻止默认行为

以a标签为例，默认情况下点击a标签会打开href中的链接，通过prevent修饰符可以阻止默认行为

<body>
    <div id="app">
            <a href="http://www.baidu.com" @click.prevent="aclick">百度一下</a>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            methods:{
                aclick(){
                     console.log("a被点击了！");
               }
            }
        });
    </script>
</body>

结果如下：没有打开默认的链接，而是调用了click事件

键修饰符

只当事件是从特定键触发时才触发回调，以回车键为例

<body>
    <div id="app">
            <input @keyup.enter="enter"/>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            methods:{
                enter(){
                     console.log("enter键！！！");
               }
            }
        });
    </script>
</body>

效果如下：