基于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的用法(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3发送验证码倒计时功能的实现(防止连点、封装复用),实现思路是点击发送验证码，验证码倒计时，校验手机号是否正常等一系列操作，本文通过示例代码介绍的非常详细，需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了在vue3中使用el-table实现新旧数据对比,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以参考一下2023-12-12
漏斗图常用于可视化业务流程中的各个阶段的转换率,例如销售漏斗或营销漏斗,它可以帮助用户识别流程中的瓶颈和改进机会,本文给大家介绍了如何使用Vue3和Plotly.js绘制交互式漏斗图,,文中有相关代码示例供大家参考,需要的朋友可以参考下2024-07-07
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
这篇文章主要介绍了vue中全局路由守卫中替代this操作(this.$store/this.$vux)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本篇文章主要主要介绍了Vue的MVVM实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了关于vue-color-颜色选择器插件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
这篇文章主要介绍了Vue源码之关于vm.$delete()/Vue.use()内部原理详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了利用vue重构有赞商城的思路以及总结整理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
Vue指令之 v-cloak、v-text、v-html实例详解
当用户频繁刷新页面或网速慢时，页面未完成 Vue.js 的加载时，导致 Vue 来不及渲染，这就会导致在浏览器中直接暴露插值(表达式)，这篇文章主要介绍了Vue指令 v-cloak、v-text、v-html,需要的朋友可以参考下2019-08-08
在使用 .vue 定义的组件中，setup 中提供了 defineExpose() 方法，该方法可以将组件内部的方法暴露给父组件，这篇文章主要介绍了Vue3 SFC 和 TSX 方式调用子组件中的函数,需要的朋友可以参考下2022-10-10
最新评论