vue中使用和操作H5的data-xxxx属性

分手后的思念是犯贱 2023-07-19 10:55 51阅读 0赞

# 资料 #

[H5中data-xxxx属性][H5_data-xxxx].

# 基本使用 #

注意这里的`navFirst($event)`,只能写`$event`,写别的都获取不到

在方法中使用`e.target.dataset.num`来获取这个`data-num`的值，建议大家打印一下这里的e,就能看到里面所有的参数

export default { 
      name: "Home",
      data() { 
        return { 
          num: 0
        };
      },
      methods: { 
        navFirst(e) { 
          console.log(e);
          this.num = e.target.dataset.num;
        },
        navReset() { 
          this.num = 0;
        }
      },
      mounted() { }
    };

## 上面这种还有一种写法 ##

注意下面的`navFirst`不指定参数

navFirst(e) { 
          console.log(e);
          this.num = e.target.dataset.num;
        },

上面这种也能拿到数据

# 除了获取data-xxx还想额外添加别的参数 #

多加个参数就能拿到了

navFirst(e,p) { 
          console.log(e);
          console.log(p);
          this.num = e.target.dataset.num;
        },

# vue的v-for中使用 #

//在当前div上定义一个点击事件
    //当然这里的data-xx名字时可以自己 定义的但是我们一般定义为与元素的值由对应意义的名字
     
     1  <div v-for="item in timeOptions" :key="item.key">
      
    //这样可以拿到相应的值
        <div  data-item ="item" @click="setlocation(event)" ></div>
     
     </div>
     
    //还有一种写法,这样我们是可以拿到索引的
    2   <div v-for="(index, item)in timeOptions" :key="item.key">
     
     <div  data-item ="index" @click="setlocation(event)" />
     
    </div>
     
    当然你也可以继续用1的方法，但在方法当中参数可以写为 $index也是可以获取得到奥索引的
     
      
      
     
    //之后我们去methods当中去定义一个对应的方法去获取值
     
    setlocation:function(ev){
        this.dispradius = ev.target.dataset.item + '米'
    }
     
     
     
    //这里需要注意的点就是 你想要获得的值并不一定在dataset当中，大家可以用console.log()去打印一下
    //ev这个传递过来的值，具体看一下再去取值

[H5_data-xxxx]: https://blog.csdn.net/Gabriel_wei/article/details/105204460