Home > Article > Web Front-end > How to use modifier .self in vue.js?
How to use modifier .self in vue.js?
- 亚连Original
- 2018-06-05 11:32:252652browse
Below I will share with you a detailed explanation of the usage of the event modifier .self in vue.js. It has a good reference value and I hope it will be helpful to everyone.
.self can be understood as skipping bubbling events and capturing events. Only events that directly act on the element can be executed.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>self</title>
<script src="vue.js"></script>
<!--'''''''''''''''''''请自行引入vue.js-->
</head>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
p {
width: 100px;
}
#obj1 {
background: deeppink;
}
#obj2 {
background: pink;
}
#obj3 {
background: hotpink;
}
#obj4 {
background: #ff4225;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<!--点击obj4的时候会分别显示： obj4、 obj3、 obj1；
.self会监视事件是否是直接作用到obj2上，若不是，则冒泡跳过该元素，-->
<p id="content">
<p id="obj1" v-on:click="doc">
obj1
<p id="obj2" v-on:click.self="doc">
obj2
<!--只有点击obj2才可以出发其点击事件。-->
<p id="obj3" v-on:click="doc">
obj3
<p id="obj4" v-on:click="doc">
obj4
</p>
</p>
</p>
</p>
</p>
<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>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Implementing modal boxes in vue (general writing method)
How to develop in Vue.js 2.0 and Cordova Building a webApp environment
Some problems occur with the WeChat JSSDK when requesting different pages through ajax?
The above is the detailed content of How to use modifier .self in vue.js?. For more information, please follow other related articles on the PHP Chinese website!