基于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 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
vue实现打印功能的两种方法
Sep 07 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
PHP分页显示制作详细讲解
2008/11/19 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
php实现网站留言板功能
2015/11/04 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
jQuery动态添加
2016/04/07 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Python关于反射的实例代码分享
2020/02/20 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
买房子个人收入证明
2014/01/16 职场文书
授权委托书格式模板
2014/04/03 职场文书
英语分层教学实施方案
2014/06/15 职场文书
个人贷款收入证明
2014/10/26 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技