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

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

这篇文章主要介绍了vue如何获取自定义元素属性参数值的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

 

偶尔还是会陷入到DOM操作上面去，其实你应该关心的是数据传递，而不是操作DOM。如果你是想获取data-num的数据，可以这样写：

1 2 3 4 5

<span @click="getData($event,'21')">55</span>   getData:function (e,num) {        console.log(num) }

这样就可以取到这个值了，如果你是确实想操作DOM，那你可以这样写：

1 2 3 4 5

<span data-num="21" ref="dataNum" @click="getData($event)">55</span>   getData:function (e) {     console.log(this.$refs.dataNum.dataset.num);   }

2.通过e.target.getAttribute

1 2 3

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

1 2 3 4 5 6 7 8

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

3.自定义命名

如：html 

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

js:

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

使用jq的方法

1 2 3

<span class="vk_cq5" classid="<{$smarty.get.id}>">   var live_id = $('.vk_cq5').attr('classid')

ref的用法  相当于操作dom
html :

1 2 3 4 5

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

js:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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)       }     }       }

以上所述是小编给大家介绍的vue如何获取自定义元素属性参数值的方法详解整合