vue.js怎么获取Dom对象的class名?

vue.js怎么获取Dom对象的class名?下面本篇文章给大家介绍一下Vue.js获取Dom对象class名(className)的方法,希望对大家有所帮助。

方法一:通过监听器监听方法event参数获取dom对象

代码:

<!doctype html>
<html>
<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。

运行效果如下:

1.png

实现方法二:通过自定义指令的inserted钩子函数的el参数获取dom对象

代码:

<!doctype html>
<html>
<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,所以可以直接使用它。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是vue.js怎么获取Dom对象的class名?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏