vue中 阻止默认冒泡和默认行为的方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{num}}</div>
        <div v-on:click="handle0">
            <button v-on:click.stop="handle1">点击1</button>
        </div>
        <div>
            <a href="http://www.baidu.com" v-on:click.prevent="handle2">跳转百度</a>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
         /*
        事件修饰符
        1.阻止冒泡
            //vue写法
            <button v-on:click.stop="handle1">点击1</button>
            // 原生js阻止冒泡,方法：
            event.stopPropagation();

        2.阻止默认行为
            //vue写法
            <a href="http://www.baidu.com" v-on:click.prevent="handle2">跳转百度</a>
           // 原生js阻止默认行为
             event.preventDefault()
        3.同时阻止冒泡和默认行为
            <a v-on:click.stop.prevent='doThat'> </a>
        */
        new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods:{
                handle0:function(){
                    this.num++;
                },
                handle1:function(event){
                // 原生js阻止冒泡,方法：
                //    1. event.stopPropagation();
                },
                handle2:function(event){
                // 原生js阻止默认行为
                //    event.preventDefault()
                }
            }
        })
    </script>
</body>
</html>

 

posted @ 2022-02-24 16:19  嘉琦  阅读(425)  评论(0)    收藏  举报