当前位置： 移动技术网 > IT编程>网页制作>CSS > Vue阻止事件冒泡和默认行为案例-弗诺缺德-SegmentFault思否

Vue阻止事件冒泡和默认行为案例-弗诺缺德-SegmentFault思否

2019年05月02日  | 移动技术网IT编程  | 我要评论

话不多说，
三句多。
先上一段代码：

<script>
    window.onload=function(){
        let vm=new vue({
            el:"#p",
            data:{
            },
            methods:{
                show(){
                    console.log(111);
                    //原生写法：
                    //js:show(e){console.log(111); e.stoppropagation();}
                    //html:<button @click="show($event)">
                },
                print(){
                    console.log(222);
                },
                write(){
                    console.log(333);
                }，
                study(){
                    console.log(444);
                    //原生写法：
                    //js:show(e){console.log(111); e.preventdefult();}
                }
            }
        });
    }
</script>
<body>
    <p id="p">
        <!--事件冒泡-->
        <p @click="write">
            <p @click="print">
                <button @click.stop="show">click me</button>
                <!--+.stop直接完事，简单干脆-->
            </p>
        </p> 
        <!--阻止默认行为-->
        <a href="#" @click.prevent="study"></a> 
        <!--+.prevent直接完事，简单暴力，握草--> 
    </p>
</body>

感觉 vue 就是神仙操作，简单直接暴力，关键也会记不住，
真是一把鼻涕一把辛酸泪啊。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网