美文网首页Vue学习
Vue阻止默认事件和冒泡(.stop.prevent)

Vue阻止默认事件和冒泡(.stop.prevent)

作者: 椰果粒 | 来源:发表于2018-08-01 20:56 被阅读4次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 阻止事件冒泡 button冒泡到div上面去了-->
        <div v-on:click="show(msg,$event)">
            <button v-on:click.stop="show(msg,$event)">点击我</button>   
            <a href="https://www.baidu.com" v-on:click.prevent.stop="show(msg,$event)">百度</a>     
        </div>
    </div>
    <script>
        new Vue({
            el : "#app",
            data : {
                url : "https://www.baidu.com"
            },
            data : {
                msg : 123
            },
            methods : {
                show : function(msg,event){
                    console.log(this.msg);
                    console.log("hello vue");
                }
            }
        })        
    </script>
</body>
</html>

相关文章

  • Vue阻止默认事件和冒泡(.stop.prevent)

  • vue事件、指令、钩子

    vue事件、指令、钩子 vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture:捕...

  • vue

    vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture 捕获.self ...

  • vue

    vue的事件修饰符: .stop:阻止冒泡 .prevent:阻止默认行为 .capture .self .onc...

  • vue

    vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture.self CommonJS...

  • vue

    vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture.self CommonJS...

  • vue

    vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture.self CommonJS...

  • Vue知识点笔记2

    Vue指令之事件修饰符:.stop 阻止冒泡(写在子元素中阻止其触发父元素事件).prevent 阻止默认事件.c...

  • js 元素事件行为

    阻止默认事件: 事件委托: 阻止事件冒泡:

  • vue学习(10)事件修饰符

    知识点: vue事件修饰符:1.prevent:阻止默认事件。(常用)2.stop:阻止冒泡事件。(常用)3.on...

网友评论

    本文标题:Vue阻止默认事件和冒泡(.stop.prevent)

    本文链接:https://www.haomeiwen.com/subject/fafdvftx.html