vue怎么给html元素加类选择器,Vue.js——获取Dom对象的类选择器名(className)
方法一：通過監(jiān)聽器監(jiān)聽方法event參數(shù)獲取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);
}
}
});
實現(xiàn)原理： 通過給div注冊監(jiān)聽方法show()并且方法中傳入event參數(shù)，event如果直接alert出來，是一個事件類型，即此處指mouseclick單擊事件，event.target即獲取單擊事件的對象dom(在java中也就是事件源)，獲取dom直接通過javascript的代碼dom.className即可獲取相應(yīng)dom的class指。
運行效果如下：
實現(xiàn)方法二：通過自定義指令的inserted鉤子函數(shù)的el參數(shù)獲取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);
}
}
}
});
實現(xiàn)原理： vue.js中為自定義指令的每一個鉤子函數(shù)都提供了四個參數(shù)，分別是：el、binding、vnode、oldVnode，具體每一個參數(shù)的意義大家可以去參考官方文檔，我就簡單講一下el，el就是表單指令所綁定的元素，即相應(yīng)的dom，所以可以直接使用它。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的vue怎么给html元素加类选择器,Vue.js——获取Dom对象的类选择器名(className)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html怎么防止修改数据,HTML防数据
- 下一篇： node服务器放vue项目,本地Vue项