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>