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


Posted in Javascript onFebruary 23, 2018

.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的用法(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
vue中动态绑定表单元素的属性方法
Feb 23 #Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 #Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 #Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 #Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 #Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 #Javascript
You might like
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
javascript函数定义的几种区别小结
2014/01/06 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
vue router demo详解
2017/10/13 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Python群发邮件实例代码
2014/01/03 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
办公室主任职责范文
2013/11/08 职场文书
房屋公证委托书
2014/04/03 职场文书
目标管理责任书
2014/04/15 职场文书
质量管理标语
2014/06/12 职场文书
人力资源职位说明书
2014/07/29 职场文书
大学生在校表现评语
2014/12/31 职场文书
初中家长意见
2015/06/03 职场文书
圣诞晚会主持词
2015/07/01 职场文书
聘任书范文大全
2015/09/21 职场文书
七年级作文之冬景
2019/11/07 职场文书
部分武汉产收音机展览
2022/04/07 无线电
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers