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)动态赋值内容为字符串 <img class="imgs-coat" v-for="(item,index) in coatImgs" :key="item.coatImg" :src="item.coatImg" alt="" :data-item="item" @click="chooseCoat($event,index)">
获取属性同上 2)动态赋值内容为对象 <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)">
获取属性 //如果不转换成字符串在转换为对象,只能显示[object,object] chooseCoat(e,index){ this.coatIndex = index; console.log(JSON.parse(e.target.dataset.item)) },
|