切版网（2013~2023）

http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82

2022年08月27日

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

本文就“vue 在标签中使用(data-XXX)自定义属性并获取的方法”展开讨论，作者切版网，发布于2022年08月27日 全文共642个字，预计阅读时长2分8秒。

我们在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-” 开头的才可以接收到

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。