vue 在标签中使用(data-XXX)自定义属性并获取的方法

最新推荐文章于 2025-06-11 19:53:15 发布

A黄俊辉A

最新推荐文章于 2025-06-11 19:53:15 发布

阅读量7.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hjh15827475896/article/details/121285593

vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了在Vue中如何在事件处理函数中获取元素的自定义属性，特别是以data-开头的属性。通过`event.currentTarget.dataset`或`event.currentTarget.getAttribute()`两种方法可以实现。文中强调了`event.srcElement`的过时，并对比了两种方法的适用场景和区别，方法一适用于data-属性，而方法二更为通用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在vue中有时候为给标签加一些特有的属性，当我们在标签上触发了事件之后，就可以在 event 对象上面获取

标签的写法

      <div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1">
        <van-image :src="aaa"></van-image>
        <span>{{ item.title }}</span>
      </div>

上面的 @click 的函数中，如果要传入事件参数，必须使用 $event ，这是固写的，不能变

当我们触发了这个事件，要在事件中得到 data-mytype的自定义属性，有两种方法

方法一

	methods:{
		clickMenu(param1,event){
			console.log(param1);	//参数一
			let mytype = event.currentTarget.dataset.mytype;
		}
	}

方法二

	methods:{
		clickMenu(param1,event){
			console.log(param1);	//参数一
			let mytype = event.currentTarget.getAttribute("data-mytype");
		}
	}

网上有很多使用 event.srcElement 这个的已经过时了，并且得不到想要的值，上面两种方式就可以解决

两种方法的区别在于，方法二更为通用一些，只要是标签上的属性，不管是不是以“data-” 开头的都可以获取到，而方法一，只有在属性是以 “data-” 开头的才可以接收到