Vue.js——获取Dom对象的类选择器名(className)

最新推荐文章于 2024-06-20 14:42:51 发布

fewuliu

最新推荐文章于 2024-06-20 14:42:51 发布

阅读量4w

点赞数 4

分类专栏： # Vue.js web前端全栈文章标签： vue.js dom操作

本文链接：https://blog.csdn.net/qq_42049445/article/details/88247089

版权

web前端全栈同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

Vue.js

16 篇文章 0 订阅

订阅专栏

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，所以可以直接使用它。

fewuliu

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Vue.js——获取Dom对象的类选择器名(className)

方法一：通过监听器监听方法event参数获取dom对象代码：&amp;lt;!doctype html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;
复制链接

扫一扫

专栏目录