Vue 获取dom元素中的自定义属性值

方法一：

HTML

<div id="app"> <button @click="getData($event,'100')">点我</button> </div> 

JS

methods : { getData(e,num) { console.log(num); // 输出 100 } } 

方法二：

HTML

<div id="app"> <button data-num="100" ref="dataNum" @click="getData($event)">点我</button> </div> 

JS

methods : { getData (e) { console.log(this.$refs.dataNum.dataset.num); // 输出 100 } } 

方法三：

HTML

<div id="app"> <button data-num="100" @click="getData($event)">点我</button> </div> 

JS

methods : { getData (e) { console.log(e.target.getAttribute('data-num')); // 输出 100 } }

 

ref 可以操作dom。 ：src加冒号为绑定属性的缩写。值是动态获取要加冒号才能取到

 

<a :src='tt' data-he='成功' ref="dataNum"  @click="getTest($event,'aa')">测试自定义属性</a>

getTest(e){
      console.log(e.target.getAttribute('data-he'));
      console.log('成功');
      console.log(this.$refs.dataNum.dataset.he);  //操作dom,获取自定义属性
      this.$refs.dataNum.style.color = 'red';  // 操作dom设置颜色
    },

　　

 

链接：https://www.jianshu.com/p/969285fc7729

< a : src=' ygy'  data-id= "ygy"  data-he= '成功后遗症'  ref= "dataNum" : data-uo=" ygy" @ click=" getYgy( $event, 'aa')" >{{ ygy}}测试一下自定义属性 </ a >