vue怎么给html元素加类选择器,Vue.js——获取Dom对象的类选择器名(className)

方法一：通过监听器监听方法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，所以可以直接使用它。