Vue初学07-事件修饰符

最新推荐文章于 2024-04-29 13:55:58 发布

置顶周达

最新推荐文章于 2024-04-29 13:55:58 发布

阅读量141

点赞数 1

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

本文链接：https://blog.csdn.net/gis_zhouda/article/details/104840403

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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>

效果如下：

周达

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue初学07-事件修饰符

1.stop修饰符相当于调用 event.stopPropagation()，阻止事件冒泡2.prevent修饰符相当于调用 event.preventDefault()，阻止默认行为3.键修饰符只当事件是从特定键触发时才触发回调，以回车键为例
复制链接

扫一扫