vue 在标签中使用(data-XXX)自定义属性并获取的方法
我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event对象上面获取标签的写法<div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1"><van-image :src="aaa"></van-image><span>{{
·
我们在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-” 开头的才可以接收到
更多推荐
已为社区贡献6条内容
所有评论(0)