How to use the modifier .stop in vue.js
This article Xiaobian for you to introduce in detail the "vue.js modifier .stop how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this "vue.js modifier .stop how to use" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.
The use of the modifier .stop
The .stop modifier is used to prevent bubbles from happening.
The usage is as follows: all the code Title # gpa {margin: 0 auto; width: 100px; height: 60px; background: green;} # pa {width: 60px; height: 40px; background: pink; margin: 0 auto Text-align: center} / /-- focus on this part of the code. Baidu / / do not bubble when you click on Baidu, execute the doThis function, and then jump to Baidu home page. / / Click the pink part, that is, the pa part, bubble occurs, and execute the doThat,dodo function. Var gpas = new Vue ({el:'#gpa', data: {}, methods: {doThis:function () {alert ("doThis")) }, doThat:function () {alert ("doThat")}, dodo:function () {alert ("dodo")}}) stop event modifier description .stop stop bubbling event modifier description
.stop
.stop is used to prevent bubbling
Document. Inner {height: 150px; background-color: gold;} .outer {padding: 40px; background-color: red } var vm = new Vue ({el: "# app", data: {} Methods: {div1Handler () {console.log ('this is the click event that triggered the inner div')}, btnHandler () {console.log ('this is the click event that triggered the btn button')})
Page operation effect
We see that not only the click event of the click button is triggered, but also the click event of the parent container div is triggered, so we can use .stop to stop this bubbling, as follows
In access testing
From the output, you can see that the click event is not bubbling up!
Read here, this article "how to use the modifier .stop in vue.js" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about the article, please follow the industry information channel.
