Vue学习

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

2018-08-01  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读