vue中的data-xx获取相应的值

最新推荐文章于 2025-07-16 08:46:11 发布

非往

最新推荐文章于 2025-07-16 08:46:11 发布

阅读量9.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_42112846/article/details/88583000

VUE 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何在HTML中使用data-属性来存储额外的非视觉性信息，包括直接获取单个元素的data属性值和在循环遍历数组时获取元素的值或索引。通过实例展示了data-属性在Vue.js中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data-radius语法： data-属性

我们可以去获取独立的标签当中标记为data-xx=""当中的值，

也可以获取当循环遍历某个数组时，当前的值或者是当前数值的索引

下面我们就来看一下具体的用法：

1，获取单个属性的值

//在当前div上定义一个点击事件
//当然这里的data-xx名字时可以自己 定义的但是我们一般定义为与元素的值由对应意义的名字
<div  @click='setlocation($event)'>
          <div data-radius='100'>100m</div>
          <div data-radius='300'>300m</div>
          <div data-radius='500'>500m</div>
          <div data-radius='1000'>1000m</div>
</div>


//之后我们去methods当中去定义一个对应的方法去获取值

setlocation:function(ev){
    this.dispradius = ev.target.dataset.radius + '米'
}



//这里需要注意的点就是 你想要获得的值并不一定在dataset当中，大家可以用console.log()去打印一下
//ev这个传递过来的值，具体看一下再去取值

2 获取循环时时数组的值：

//在当前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这个传递过来的值，具体看一下再去取值

以上就是data-xx的简单使用