zoukankan      html  css  js  c++  java
  • 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.  
      },
  • 相关阅读:
    c++ 01
    unix c 11
    unix c 10
    unix c 09
    unix c 08
    unix c 07
    unix c 06
    unix c 05
    unix c 04
    Petrozavodsk Summer Training Camp 2017
  • 原文地址:https://www.cnblogs.com/daiwenru/p/13711929.html
Copyright © 2011-2022 走看看