方法一：通過監聽器監聽方法event參數獲取dom對象

代碼：

vue自定義指令

.pop{

width:100px;

background-color:#ffff00;

height:100px;

}

var vm = new Vue({

el:'#app',

data:{

msg:'我是vue'

},

methods:{

show:function(event){

alert(event.target.className);

}

}

});

實現原理： 通過給div注冊監聽方法show()并且方法中傳入event參數，event如果直接alert出來，是一個事件類型，即此處指mouseclick單擊事件，event.target即獲取單擊事件的對象dom(在java中也就是事件源)，獲取dom直接通過javascript的代碼dom.className即可獲取相應dom的class指。

運行效果如下：

實現方法二：通過自定義指令的inserted鉤子函數的el參數獲取dom對象

代碼：

vue自定義指令

.pop{

width:100px;

background-color:#ffff00;

height:100px;

}

var vm = new Vue({

el:'#app',

data:{

msg:'我是vue'

},

//自定義指令

directives:{

//注冊一個自定義指令

change:{

//指令的定義

inserted:function(el){

alert(el.className);

}

}

}

});

實現原理： vue.js中為自定義指令的每一個鉤子函數都提供了四個參數，分別是：el、binding、vnode、oldVnode，具體每一個參數的意義大家可以去參考官方文檔，我就簡單講一下el，el就是表單指令所綁定的元素，即相應的dom，所以可以直接使用它。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue怎么给html元素加类选择器,Vue.js——获取Dom对象的类选择器名(className)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。