vue如何获取自定义元素属性参数值的方法

<span @click="getData($event,'21')">55</span>

getData:function (e,num) {
       console.log(num)
}

<span data-num="21" ref="dataNum" @click="getData($event)">55</span>

getData:function (e) {
    console.log(this.$refs.dataNum.dataset.num);
  }

 <div id="app">
    <span data-num="21" @click="getData($event)">55</span>
  </div>

new Vue({
   el:'#app',
   methods:{
     getData:function (e) {
       console.log(e.target.getAttribute('data-num'))
     }
   }
 })

 <div class="live-dd" numId = "<{$item.id}>"></div>

$('.live-dd').on("click",function(){var num = this.getAttribute('numId');location.href='/live/info?id='+num;})

<span class="vk_cq5" classid="<{$smarty.get.id}>">

var live_id = $('.vk_cq5').attr('classid')

<div> 
  <div id="box" ref="mybox"> 
   DEMO 
  </div> 
 </div>

export default {  
  data () {  
    return {  
        
    }  
  },  
  mounted () {  
    this.init();  
  },  
  methods:{  
    init() {  
      const self = this;  
      this.$refs.mybox.style.color = 'red';  
      setTimeout(() => {  
        self.$refs.mybox.style.color = 'blue';  
      },2000)  
    }  
  }  
  
}