基于vue.js中事件修饰符.self的用法(详解)

2019-11-19 14:19:42

字体：大中小

来源：转载

供稿：网友

.self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行。

代码如下：

<!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; } div {  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上，若不是，则冒泡跳过该元素，--><div id="content"> <div id="obj1" v-on:click="doc">  obj1  <div id="obj2" v-on:click.self="doc">   obj2   <!--只有点击obj2才可以出发其点击事件。-->   <div id="obj3" v-on:click="doc">    obj3    <div id="obj4" v-on:click="doc">     obj4    </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.js中事件修饰符.self的用法(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：对vue.js中this.$emit的深入理解

下一篇：vue.js2.0点击获取自己的属性和jquery方法