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 >