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:252713browse

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>
 <!--&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;&#39;请自行引入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: &#39;&#39;
  },
  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.

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Explain in detail how to use this.$emit in vue.jsNext article：Explain in detail how to use this.$emit in vue.js

See more

How to use modifier .self in vue.js?

Related articles