vue中动态给自定义属性data-xx赋值并读取内容

1、静态赋值

<img class="imgs-coat" v-for="(item,index) in coatImgs" :key="item.coatImg" :src="item.coatImg" alt="" data-item="123" @click="chooseCoat($event,index)">

获取自定义属性

chooseCoat(e,index){

this.coatIndex = index;

console.log(e.target.dataset.item)；//123

}

2、动态赋值

动态赋值和静态赋值的区别就是在data-xx前面➕：

1）动态赋值内容为字符串

1. <img class="imgs-coat" v-for="(item,index) in coatImgs" :key="item.coatImg"

2. :src="item.coatImg" alt="" :data-item="item" @click="chooseCoat($event,index)">

获取属性同上

2）动态赋值内容为对象

1. <img class="imgs-coat" v-for="(item,index) in coatImgs" :key="item.coatImg"

2. :src="item.coatImg" alt="" :data-item="JSON.stringify(item)" @click="chooseCoat($event,index)">

获取属性

1. //如果不转换成字符串在转换为对象，只能显示[object，object]

2. chooseCoat(e,index){

3. this.coatIndex = index;

4. console.log(JSON.parse(e.target.dataset.item))

5. },