vue.js中修饰符.stop的用法。

最新推荐文章于 2024-05-09 12:10:41 发布

置顶有一个王小森

最新推荐文章于 2024-05-09 12:10:41 发布

阅读量3.5w

点赞数 3

分类专栏： vue.js 文章标签： vue-js stop 阻止冒泡修饰符

本文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/73732752

版权

vue.js 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

.stop修饰符是用来阻止冒泡事件的发生的。

用法如下：

<a v-on:click.stop="doThis"></a>

下面是全部的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<style>
    #gpa {
        margin: 0 auto;
        width: 100px;
        height: 60px;
        background: green;
    }
    #pa {
        width: 60px;
        height: 40px;
        background: pink;
        margin: 0 auto;
        text-align: center
    }
</style>
<body>
//--------------------------------重点是这一部分代码。
<div id="gpa" v-on:click="dodo">
    <div id="pa" v-on:click="doThat">
        <a  v-on:click.stop="doThis" href="http://www.baidu.com">百度</a>
    //点击百度的时候不发生冒泡，执行doThis函数，然后跳转到百度首页。
    </div>
    //点击粉色部分，即pa部分，发生冒泡，执行doThat，dodo函数。
</div>
</body>
<script>
    var gpas = new Vue({
        el:'#gpa',
        data:{
        },
        methods:{
            doThis:function(){
                alert("doThis");
            },
            doThat:function (){
                alert("doThat")
            },dodo:function(){
                alert("dodo")
            }
        }
    })
    </script>
</html>