微信小程序常见问题_详解Vue 工作修饰符capture 的

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式

即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。

就是谁有该事件修饰符，就先触发谁。

代码如下：

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title .capture事件修饰符 /title 
 style type="text/css" 
 margin: 0 auto;
 text-align: center;
 line-height: 40px;
 div {
 width: 100px;
 #obj1 {
 background: deeppink;
 #obj2 {
 background: pink;
 #obj3 {
 background: hotpink;
 #obj4 {
 background: #ff4225;
 /style 
 script src="vue/2.4.2/vue.min.js" /script 
 /head 
 body 
 div id="content" 
 div id="obj1" v-on:click.capture="doc" 
 obj1
 div id="obj2" v-on:click.capture="doc" 
 obj2
 div id="obj3" v-on:click="doc" 
 obj3
 div id="obj4" v-on:click="doc" 
 obj4
 !--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
 由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
 /div 
 /div 
 /div 
 /div 
 /div 
 script type="text/javascript" 
 var content = new Vue({
 el: "#content",
 data: {
 id: ''
 methods: {
 doc: function () {
 this.id = event.currentTarget.id;
 alert(this.id)
 /script 
 /body 
 /html 

总结

以上所述是小编给大家介绍的Vue 事件修饰符capture 的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！