自定义属性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为同一个元素

上一篇:使用switch实现多选


下一篇:php ob缓存介绍以及ob函数详解