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

 更新时间:2018年02月23日 10:44:52   作者:有一个王小森   我要评论

下面小编就为大家分享一篇基于vue.js中事件修饰符.self的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

.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绑定checkbox并获取、改变选中状态的实例

    vue .js绑定checkbox并获取、改变选中状态的实例

    今天小编就为大家分享一篇vue .js绑定checkbox并获取、改变选中状态的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue搜索和vue模糊搜索代码实例

    vue搜索和vue模糊搜索代码实例

    这篇文章主要介绍了vue搜索和vue模糊搜索,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue.js实现简单轮播图效果

    vue.js实现简单轮播图效果

    这篇文章主要为大家详细介绍了vue.js实现简单轮播图效果的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • mint-ui 时间插件使用及获取选择值的方法

    mint-ui 时间插件使用及获取选择值的方法

    下面小编就为大家分享一篇mint-ui 时间插件使用及获取选择值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue-CLI3.x 设置反向代理的方法

    Vue-CLI3.x 设置反向代理的方法

    这篇文章主要介绍了Vue-CLI3.x 设置反向代理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 教你用Cordova打包Vue项目的方法

    教你用Cordova打包Vue项目的方法

    这篇文章主要介绍了教你用Cordova打包Vue项目的方法,详细的介绍了如何Vue项目打包成app,具有一定的参考价值,有兴趣的可以了解一下
    2017-10-10
  • vue自定v-model实现表单数据双向绑定问题

    vue自定v-model实现表单数据双向绑定问题

    vue.js的一大功能便是实现数据的双向绑定。这篇文章主要介绍了vue自定v-model实现 表单数据双向绑定的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 如何为vue的项目添加单元测试

    如何为vue的项目添加单元测试

    这篇文章主要介绍了如何为vue的项目添加单元测试,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    这篇文章主要介绍了vue项目 使用Hbuilder打包app 设置沉浸式状态栏的方法,本文通过实例代码效果图展示给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • 详解vuex的简单使用

    详解vuex的简单使用

    这篇文章主要介绍了详解vuex的简单使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论