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

切版网专注网页切版服务

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

建立您的线上前端开发部门

最高11年前端从业经验,专业只做web前端切图,只要您愿意,切版网就是您公司的前端部门。