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

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

APIS——获取dom对象、操作元素内容和属性、间歇函数
APIS 变量声明 Web API基本认知作用和分类 DOM DOM树 DOM对象获取DOM对象根据CSS选择器来获取DOM元素(重点) 其它获取DOM元素方法(了解) 操作元素内容操作元素属 ...
jQuery→简介引入、jQuery类数组对象$()与DOM对象、各种选择器、attr()、html() 、text()、val()
官网下载 https://jquery.com/download/ jQuery对象与DOM对象 jQuery类数组对象$('')转DOM对象 DOM对象转jQuery对象 id选择器类选择器元素 ...
vue组件挂载与html加载区别,vue中的挂载是什么意思?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,方 ...
vue 和 js 获取 dom节点下的某个元素，然后设置样式
vue获取dom节点下的类名,然后修改样式 <div ref="divRef"><div class="a">提到岁月,你们总说它是长河 ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
通过原生js获取dom元素的九种方式
获取dom元素 <body><!-- <div id="box">我是一个DIV</div><p class="item& ...
js获取更改css伪类
在日常的开发中,我们经常在样式中使用css伪类,必要的时候,通过js操作需要改变css伪类的样式 js获取css伪类通过getcomputed()方法,第一个参数dom元素,第二个参数伪类名称字符串 ...

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

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

最新文章

热门文章