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的简单使用