提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue属性 自定义 动态 内容 读取 Data 赋值
2023-09-11 14:19:38 时间

 

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))
      },

 

 

 

 

转 ：  https://blog.csdn.net/wuguidian1114/article/details/103473649

 

相关文章