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,i...
·
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))
},
更多推荐
已为社区贡献3条内容
所有评论(0)