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

来源：互联网发布：linux查询当前时间编辑：程序博客网时间：2024/05/21 12:46

.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>

修饰符.stop应该放在需要阻止冒泡的位置上。

阅读全文

0 0