Vue.js——获取Dom对象的类选择器名(className)
方法一：通过监听器监听方法event参数获取dom对象代码：<!doctype html><html lang="en"><head><meta charset="UTF-8"
·
Hi，我是五柳，一个双非二本、自学编程的前端工程师，欢迎关注我的微信公众号：Code center。
方法一：通过监听器监听方法event参数获取dom对象
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue自定义指令</title>
<script src="vue-resource-1.3.4.js"></script>
<script src="vue-2.4.0.js"></script>
<style>
.pop{
width:100px;
background-color:#ffff00;
height:100px;
}
</style>
</head>
<body>
<div id="app">
<div class="pop" @click="show"></div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'我是vue'
},
methods:{
show:function(event){
alert(event.target.className);
}
}
});
</script>
</html>
实现原理： 通过给div注册监听方法show()并且方法中传入event参数，event如果直接alert出来，是一个事件类型，即此处指mouseclick单击事件，event.target即获取单击事件的对象dom（在java中也就是事件源），获取dom直接通过javascript的代码dom.className即可获取相应dom的class指。
运行效果如下：
实现方法二：通过自定义指令的inserted钩子函数的el参数获取dom对象
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue自定义指令</title>
<script src="vue-resource-1.3.4.js"></script>
<script src="vue-2.4.0.js"></script>
<style>
.pop{
width:100px;
background-color:#ffff00;
height:100px;
}
</style>
</head>
<body>
<div id="app">
<div class="pop" v-change></div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'我是vue'
},
//自定义指令
directives:{
//注册一个自定义指令
change:{
//指令的定义
inserted:function(el){
alert(el.className);
}
}
}
});
</script>
</html>
实现原理： vue.js中为自定义指令的每一个钩子函数都提供了四个参数，分别是：el、binding、vnode、oldVnode，具体每一个参数的意义大家可以去参考官方文档，我就简单讲一下el，el就是表单指令所绑定的元素，即相应的dom，所以可以直接使用它。
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献10条内容
所有评论(0)