写出五个vue常用的事件修饰符,vue中stop修饰符是做什么的
本文主要介绍修饰语的用法分析。停在vue.js，很有参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
修饰符。stop的用法如下。下面是所有代码停止事件修饰符的详细介绍。
修饰符.stop的用法
的。stop修饰符用于防止冒泡事件的发生。
用法如下
a v-on:click.stop=doThis/a
下面是全部的代码
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
脚本src= vue . js /脚本
/头
风格
#gpa {
边距：0自动；
宽度：100px
高度：60px
背景：绿色；
}
#pa {
宽度：60px
高度：40px
背景：粉色；
边距：0自动；
文本对齐：居中
}
/风格
身体
//-
div id=gpa v-on:click=dodo
div id=pa v-on:click=doThat
a-on:click . stop= dothis href= 3358 www . Baidu . com rel= external no follow Baidu/a
//点百度的时候，不会出现冒泡。执行doThis功能，然后跳转到百度首页。
/div
//点击粉色部分，也就是pa部分，向上冒泡，执行doThat，dodo函数。
/div
/body
脚本
var gpas=new Vue({
埃尔： #gpa ，
数据：{
},
方法：{
doThis:function(){
alert( doThis )；
},
doThat:function (){
alert(doThat )
}，dodo:function(){
警报(“多多”)
}
}
})
/脚本
/html
stop事件修饰符
修改者说。停止防止冒泡。
stop事件修饰符具体介绍
.stop。停止是用来防止冒泡。
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题文档/标题
脚本src=。/lib/vue-2.4.0.js/script
风格。内部{
高度：150px
背景色：金色；
}。外部{
填充：40px
背景色：红色；
}
/风格
/头
身体
div id=应用程序
div class= inner @ click= div 1 handler
type= button value= click @ click= BTN handler
/div
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
},
方法：{
div1Handler() {
Console.log(这是触发内部div的单击事件)
},
btnHandler() {
Console.log(这是触发btn按钮的点击事件)
}
}
})
/脚本
/body
/html
页面操作效果
我们看到不仅触发了按钮的click事件，还触发了父容器div的click事件。这个时候，我们可以用。停止冒泡，如下所示
在访问测试中
通过输出，您可以看到点击事件没有冒泡！
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。