vue中动态给自定义属性data-xx赋值并读取内容
<template v-for="item in items"> <a href="#" :data-item="item" @click.prevent="onClick" class="item" v-if="showHots">{{ item }}</a> </template>
- 静态赋值
data-xxx=”123”
- 动态赋值
:data-xxx=”…”
获取属性的方法:
- onClick(evt) {
const item = evt.target.dataset.xxx
const item = evt.currentTarget.dataset
}
<img class="imgs-coat" v-for="(item,index) in coatImgs" :key="item.coatImg"
:src="item.coatImg" alt="" :data-item="JSON.stringify(item)" @click="chooseCoat($event,index)">
:data-item="JSON.stringify(item)"
获取对象:
JSON.parse(e.target.dataset.item)
DOM事件中target和currentTarget的区别
target是事件触发的真实元素
currentTarget是事件绑定的元素
事件处理函数中的this指向事件中为currentTarget
currentTarget和target,有时候是同一个元素有时候不是同一个元素(因为事件冒泡)
当事件是子元素触发时,currentTarget为绑定事件的元素,target是子元素
当事件是元素自身触发时,currentTarget和target为同一个元素