vue获取当前事件的dom元素 var thisDom = e.currentTarget；

最新推荐文章于 2024-07-26 20:40:28 发布
最新推荐文章于 2024-07-26 20:40:28 发布
阅读量9.4k 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songdewu/article/details/79168983
版权
在Vue.js开发中，使用click事件时，可通过`e.currentTarget`来获取触发事件的DOM元素，实现对元素的进一步操作。
摘要由CSDN通过智能技术生成

在vue里面，经常用到click，如何获取执行click事件的当前dom对象呢？

<span class="btn-play" tapmode @click="playvideo($event,item.pic)">事件</span>

            playvideo:function(e,src){
                vue获取当前事件的dom元素   
                var thisDom = e.currentTarget;

            }

宋德武
关注
专栏目录
订阅专栏
vue 获取当前点击dom
爱睡的虫虫
10-11 2507
获取元素
Vue.js的应用——e.currentTarget的应用
Front-End严黑C的博客
08-30 7438
1.当li下有多个子标签时，给li添加了click事件，但是在vue中如果用e.target获取的一般均为li里的子元素，因此采用e.currentTarget方法去获取li的click事件，再去获取li对应的id值，从而可以进行参数传承。 2.在用vue调试工具Devtools 时发现vue.min.js和vue.js的区别，引用的vue.js应该使用vue.js（开发版本）而不是vue.min.js（生成版本）
Vue中如何获取dom元素？vue方法
weixin_56187723的博客
07-26 429
在Vue中，通常我们不建议直接操作DOM元素，因为Vue的设计哲学是声明式渲染，即你通过Vue的模板语法（如插值表达式、指令等）来描述你的界面，Vue会负责将你的数据渲染成DOM，并在数据变化时自动更新DOM。然而，在某些情况下，你可能确实需要直接访问或操作DOM元素。Vue提供了几种方法来实现这一点，但请注意，这些方法应该谨慎使用，以避免破坏Vue的响应式系统和组件的封装性。
e.target与e.currentTarget
xmy_wh的博客
07-12 1196
e.target 事件源   eg： 点击  那事件源就是button e.currentTarget  获取最外层 eg: 确定   当点击确定两字时事件源也会找到最外层button $('.doSubmit').click((e) => {     e.stopPropagation();     let classStr = $(e.curre
currentTarget与target
a1013774673的博客
10-11 114
currentTarget和target都是 2 级 DOM 事件标准定义的属性. currentTarget:返回其事件监听器触发该事件的元素，是事件传播过程中经过的节点对象，它可能与target属性相同（目标阶段），也可能是target属性对应节点的祖先节点（捕获附页或冒泡阶段）。 target:返回触发此事件的元素（事件的目标节点），是直接触发事件的节点对象，是整个事件流的最底...
vue组件中获取dom元素
Stargazer777的博客
11-16 316
vue组件中获取dom元素
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> <li v-on:click=say(>点击当前行文本 <li>li2 <li>li3 [removed] new Vue({ ... message: 'Hello Vue.js!... var el = event.currentTarget; al
Vue 点击获得父元素，子元素，兄弟元素（DOM操作）
qq_37809967的博客
07-09 2461
Vue 点击获得父元素，子元素，兄弟元素（DOM操作）Vue 点击获得父元素，子元素，兄弟元素（DOM操作）=`html``js` Vue 点击获得父元素，子元素，兄弟元素（DOM操作）= html <ul @click ="clickfun($event)"> <li></li> </ul> js // An highlighted block var foo = 'bar'; methods: { clickfun(e) { e
在Vue中获取自定义属性方法:data-id的实例
10-14
var autoId = $(e.currentTarget).attr('data-id'); localStorage.setItem('autoId', autoId); ``` 需要注意，这里使用了jQuery的`attr`方法来获取`data-id`，在纯Vue应用中，通常会使用Vue的`ref`或`v-bind`来...
踩坑vue v-for操作DOM后不更新
weixin_43986782的博客
04-26 3199
踩坑vue v-for操作DOM后不更新 前言 最近在看vue的风格指南时，发现了一个以前在学习，甚至开发时忽略的问题。 现象 看到上面的一段话，想到自己在刚开发的时候遇到过类似的问题。就是在强行修改DOM后（比如改变class）；将v-for 模板数组中，改变的这条删除掉，发现，该class还在。延伸到的场景就是先选择一个或者多个列表，改变了样式(表明该列表被选中)，再删除选中的类别。此时发现...
DOM事件 vue @change
LuckyMon的博客
02-25 2453
js onchange
垂直菜单样式&vue在click事件中获取当前dom元素
qq_35976548的博客
06-09 1165
简单版垂直菜单样式 效果图： <div id ="leftDiv"> <a href="#" @click="goLink('我是其他参数',$event)" class="active">AAA</a> <a href="#" @click="goLink('我是其他参数',$event)">BBB</a> </div> <div id ="rightDiv"> &lt
vue获取DOM元素，触发事件
qq_42099419的博客
02-20 2675
HTML元素： 如果元素是一个原生的HTML元素，通过绑定ref="selector" 通过this.$refs['selector'].click() 触发 组件： 如果元素是一个组件，通过绑定ref="selector" 需要通过this.$refs['selector'].$el.click() 触发 ...
vue实践——使用e.target.dataset实现tab切换
yt412182782的博客
08-26 1848
前几篇文章曾经说到过vue实现tab切换的方法，详见https://blog.csdn.net/yt412182782/article/details/99291751 今天给大家介绍另一种实现方式 template methods data 实现效果 这种方法的关键点在index的值，index的值是通过data-index控制的，e.target.dataset.i...
Vue中操作dom的方法
热门推荐
vue
12-12 1万+
1、 this.$refs.* 拿到虚拟Dom,可以进行真实dom的一切操作 1）在标签中添加ref="*" 2）在方法中用this.$refs.*拿到这个元素，跟document.getElementById('*')一样。   2、自定义指令中，el就是当前环境下的Dom元素   el.style.color = "yellow";   console.log(el.tagName)...
获取DOM对象的五种方式
微风的博客
08-15 2684
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
VUE中v-on:click事件中获取当前dom元素
weixin_30785593的博客
08-21 2611
在开发中总是忘记， 特意在此记录 关键字： $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { ...
vue项目中获取DOM元素以及获取当前点击元素的DOM元素
sally18的博客
11-28 8605
vue怎么让这个 this.sideHeight = this.$refs.verticalSide.offsetHeight; 执行完再生成dom
最新发布
09-13
在Vue中，如果你需要在组件的`data`属性中赋值为DOM元素的尺寸，通常是在`mounted`钩子中进行，因为`mounted`钩子是在组件的模板编译之后执行的，此时DOM已经被创建并且是可用的。以下是如何使用`this.$refs`来获取DOM元素并在其上设置属性的示例： ```javascript <template> <div> <div ref="verticalSide"></div> </div> </template> <script> export default { data() { return { sideHeight: null, }; }, mounted() { this.sideHeight = this.$refs.verticalSide.offsetHeight; // 此时this.$refs.verticalSide已经是可用的DOM元素 } } </script> ``` 这段代码中，我们在模板中给一个`div`元素添加了一个`ref`属性，这个`ref`属性的值是`verticalSide`。在组件的`mounted`钩子函数中，我们可以通过`this.$refs.verticalSide`访问到这个DOM元素，并且可以获取到它的`offsetHeight`属性，然后将这个值赋给`data`中的`sideHeight`属性。 需要注意的是，直接在模板中使用`this.sideHeight = this.$refs.verticalSide.offsetHeight`是不可行的，因为模板编译时，DOM还未渲染，`this.$refs.verticalSide`是`undefined`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值