Rumah > Artikel > hujung hadapan web > 在vue.js中修饰符.self的使用方法？

在vue.js中修饰符.self的使用方法？

亚连asal: 2018-06-05 11:32:252697semak imbas

下面我就为大家分享一篇基于vue.js中事件修饰符.self的用法详解，具有很好的参考价值，希望对大家有所帮助。

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

代码如下：

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

上面是我整理给大家的，希望今后会对大家有帮助。

vue中实现模态框（通用写法）

在Vue.js 2.0和Cordova开发中如何搭建webApp环境

在ajax请求不同页面的微信JSSDK出现的一些问题？

Atas ialah kandungan terperinci 在vue.js中修饰符.self的使用方法？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在vue.js中详细解读this.$emit的使用方法Artikel seterusnya：在vue.js2.0中通过点击如何获取获取自己的属性

Artikel berkaitan

Lihat lagi