自定义属性data-xx赋值并读取内容

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>

　　

1. 静态赋值

data-xxx=”123”

1. 动态赋值

: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为同一个元素