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）動態賦值內容為字符串

<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