Maison >interface Web >js tutoriel >Comment utiliser le modificateur .self dans vue.js ?

Comment utiliser le modificateur .self dans vue.js ?

亚连original: 2018-06-05 11:32:252745parcourir

Ci-dessous, je partagerai avec vous une explication détaillée de l'utilisation du modificateur d'événement .self dans vue.js. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

.self peut être compris comme sauter des événements bouillonnants et capturer des événements. Seuls les événements qui agissent directement sur l'élément peuvent être exécutés.

Le code est le suivant :

<!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>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. à l'avenir.

Articles associés :

Implémentation de la boîte modale dans vue (méthode d'écriture générale)

Comment développer dans Vue.js 2.0 et Cordova Construire un environnement webApp

Quelques problèmes avec WeChat JSSDK lors de la demande de différentes pages via ajax ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Expliquez en détail comment utiliser this.$emit dans vue.jsArticle suivant：Expliquez en détail comment utiliser this.$emit dans vue.js

Articles Liés

Voir plus