vue自定义指令</"/>
<link href="/style/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<script src="/style/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/style/functions.js" type="text/javascript"></script>
<script src="/style/clist-time.js" type="text/javascript"></script>
</head>
<body>
<header id="indexHeader">
<div class="top_bar">
<div class="heade_m"><div class="refresh_title"></div></div>
<div class="heade_l"><a class="msg-box" href="/"><i class="iconfont icon-shouye-shouye"></i></a></div>
<div class="heade_r"><a href="javascript:;" class="btn search"><i class="iconfont icon-sousuo"></i></a></div>
</div>
<div class="top_menu_bar">
<div id="top_menu" class="top_menu_list" data-type="index" >
<ul class="nav flexy-menu orange">
<li class="navmore"></li>
<li class="hover"><a href="/">首页</a></li>
<li><a href="/zs/">知识</a></li><li><a href="/know/">知道</a></li><li><a href="/tags/liulanqi.html" title="浏览器" draggable="false" target="_blank">浏览器</a></li>
<li><a href="/tags/fuwuqi.html" title="服务器" draggable="false" target="_blank">服务器</a></li>
<li><a href="/tags/peizhi.html" title="配置" draggable="false" target="_blank">配置</a></li>
<li><a href="/tags/pingmu.html" title="屏幕" draggable="false" target="_blank">屏幕</a></li>
<li><a href="/tags/shezhi.html" title="设置" draggable="false" target="_blank">设置</a></li>
<li><a href="/tags/zhiling.html" title="指令" draggable="false" target="_blank">指令</a></li>
<li><a href="/tags/xuexi.html" title="学习" draggable="false" target="_blank">学习</a></li>
<li><a href="/tags/jiekou.html" title="接口" draggable="false" target="_blank">接口</a></li>
<li><a href="/tags/zhuomian.html" title="桌面" draggable="false" target="_blank">桌面</a></li>
<li><a href="/tags/kuaijiejian.html" title="快捷键" draggable="false" target="_blank">快捷键</a></li>
</div>
</div>
<div class="wap-search">
<div class="search-form">
<form action="/e/search/index.php" method="post">
<input type="hidden" value="title,skey" name="show">
<div class="search-select">
<select name="classid">
<option value="1">全部</option>
</select>
</div>
<div class="search-fields">
<input type="text" class="" placeholder="搜索词..." autocomplete="off" value="" name="keyboard" required="">
<button class="" type="submit"><i class="iconfont icon-sousuo"></i></button>
</div>
</form>
</div>
<div class="popula-search-key"><span>热门：</span><a href="/tags/huawei.html" title="华为" draggable="false" target="_blank">华为</a><a href="/tags/zhichi.html" title="支持" draggable="false" target="_blank">支持</a><a href="/tags/canshu.html" title="参数" draggable="false" target="_blank">参数</a><a href="/tags/fenbianshuai.html" title="分辨率" draggable="false" target="_blank">分辨率</a><a href="/tags/jiojuefangfa.html" title="解决方法" draggable="false" target="_blank">解决方法</a><a href="/tags/kongzhi.html" title="控制" draggable="false" target="_blank">控制</a><a href="/tags/shuxing.html" title="属性" draggable="false" target="_blank">属性</a><a href="/tags/qidong.html" title="启动" draggable="false" target="_blank">启动</a><a href="/tags/shengji.html" title="升级" draggable="false" target="_blank">升级</a><a href="/tags/cuowu.html" title="错误" draggable="false" target="_blank">错误</a><a href="/tags/pingtai.html" title="平台" draggable="false" target="_blank">平台</a><a href="/tags/tuijian.html" title="推荐" draggable="false" target="_blank">推荐</a><a href="/tags/buzhou.html" title="步骤" draggable="false" target="_blank">步骤</a><a href="/tags/moshi.html" title="模式" draggable="false" target="_blank">模式</a><a href="/tags/chaxun.html" title="查询" draggable="false" target="_blank">查询</a><a href="/tags/yunxing.html" title="运行" draggable="false" target="_blank">运行</a><a href="/tags/kongjian.html" title="空间" draggable="false" target="_blank">空间</a><a href="/tags/wenjianjia.html" title="文件夹" draggable="false" target="_blank">文件夹</a><a href="/tags/shubiao.html" title="鼠标" draggable="false" target="_blank">鼠标</a><a href="/tags/tubiao.html" title="图标" draggable="false" target="_blank">图标</a><a href="/tags/zhongqi.html" title="重启" draggable="false" target="_blank">重启</a><a href="/tags/jihuo.html" title="激活" draggable="false" target="_blank">激活</a><a href="/tags/lianxiang.html" title="联想" draggable="false" target="_blank">联想</a><a href="/tags/jiancha.html" title="检查" draggable="false" target="_blank">检查</a><a href="/tags/zhuangtai.html" title="状态" draggable="false" target="_blank">状态</a><a href="/tags/yingyongchengxu.html" title="应用程序" draggable="false" target="_blank">应用程序</a></div>
</div>
</header>
<div class="content-wrap">
<div class="content">
<div class="article-container">
<header class="article-header">
<h1 class="article-title">vue.js怎么获取Dom对象的class名？</h1>
<div class="article-meta">
<div class="meta-mus"><span><i class="iconfont icon-shijian"></i><p class="time_41328">2022-11-07 14:47:56</p><script>deal_time(41328,0);</script></span></div>
</div>
</header>
<article id='img' class="article-content">
vue.js怎么获取Dom对象的class名？下面本篇文章给大家介绍一下Vue.js获取Dom对象class名(className)的方法，希望对大家有所帮助。</p><p><img src="/d/jc/2022092515/orduqzsbsi037.webp"/></p><p><strong>方法一：通过监听器监听方法event参数获取dom对象</strong></p><p>代码：</p><pre class="brush:js;toolbar:false"><!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></pre><p>实现原理： 通过给div注册监听方法show()并且方法中传入event参数，event如果直接alert出来，是一个事件类型，即此处指mouseclick单击事件，event.target即获取单击事件的对象dom（在java中也就是事件源），获取dom直接通过javascript的代码dom.className即可获取相应dom的class。</p><p>运行效果如下：</p><p><img src="/d/jc/2022092515/z5dboly2wp037.webp" /></p><p>实现方法二：通过自定义指令的inserted钩子函数的el参数获取dom对象</p><p>代码：</p><pre class="brush:js;toolbar:false"><!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></pre><p>实现原理： vue.js中为自定义指令的每一个钩子函数都提供了四个参数，分别是：el、binding、vnode、oldVnode，具体每一个参数的意义大家可以去参考官方文档，我就简单讲一下el，el就是表单指令所绑定的元素，即相应的dom，所以可以直接使用它。</p><p>更多<a href="http://127.0.0.1/d/jc/2022091710/5322160tobhuozf2po" target="_blank">web前端开发</a>知识，请查阅 HTML中文网 ！！<p>以上就是vue.js怎么获取Dom对象的class名？的详细内容，更多请关注易知道|edz.cc其它相关文章！</p></article>
<script>
window.onload=function(){
var imgs = document.getElementsByTagName('img');
for(var i = 0;imgs[i];i++){
var thttp = imgs[i].getAttribute('src').indexOf("http");
var tok = imgs[i].getAttribute('src').indexOf("//");
if(thttp == -1 || tok == -1) {imgs[i].setAttribute('src', 'https://www.ezd.cc' + (imgs[i].getAttribute('src') || ''));}
}
}
</script>
<div class="entry-meta">
<div class="articleinfo-tag"><i class="iconfont icon-biaoqian"></i><a href="/tags/duixiang.html" title="对象" class="c1" target="_blank">对象</a><a href="/tags/fangfa.html" title="方法" class="c1" target="_blank">方法</a><a href="/tags/canshu.html" title="参数" class="c1" target="_blank">参数</a><a href="/tags/jiantingqi.html" title="监听器" class="c1" target="_blank">监听器</a><a href="/tags/zidingyizhiling.html" title="自定义指令" class="c1" target="_blank">自定义指令</a></div>
</div>
</div>
<div class="relatebox">
<div class="relatebox-lists">
<h3>推荐阅读<span></span></h3>
<div class="relatebox-articles">
<ul>
<article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc7O.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030506/x4ysjpxeczi36.webp" alt="win10多任务按键怎么设置在底部详细方法" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc7O.html" title="win10多任务按键怎么设置在底部详细方法">win10多任务按键怎么设置在底部详细方法</a></h2>
</div>
<p class="text-muted meta">win10多任务按键怎么设置在底部详细方法，按键,任务，在使用电脑时候，任务视图按钮被用户们从键盘上不小心的移除了，导致使用起来非常的不方便</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6G.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030508/32rklql0kjx22.webp" alt="opporeno8参数配置及价格" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6G.html" title="opporeno8参数配置及价格">opporeno8参数配置及价格</a></h2>
</div>
<p class="text-muted meta">opporeno8参数配置及价格，面部,亿元，Oppo的荣誉2020年1月4日,接近屏幕关闭传感器是否支持双卡：支持oppor11splus什么时候上市的Oppo R11S P</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc68.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/7.webp" alt="设置里程碑|设置里程碑的方法有哪些" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc68.html" title="设置里程碑|设置里程碑的方法有哪些">设置里程碑|设置里程碑的方法有哪些</a></h2>
</div>
<p class="text-muted meta">设置里程碑|设置里程碑的方法有哪些，，1. 设置里程碑的方法有哪些1、通过挑战风险，突破认知，从而突破自我。只有在某些特殊的时刻，比如想法和</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc5w.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/8.webp" alt="Outlook的PST文件损坏的修复方法" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc5w.html" title="Outlook的PST文件损坏的修复方法">Outlook的PST文件损坏的修复方法</a></h2>
</div>
<p class="text-muted meta">Outlook的PST文件损坏的修复方法，文件， Outlook的PST文件可能会损</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc4K.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/35.webp" alt="手提电脑手写怎么设置|电脑手写设置方法" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc4K.html" title="手提电脑手写怎么设置|电脑手写设置方法">手提电脑手写怎么设置|电脑手写设置方法</a></h2>
</div>
<p class="text-muted meta">手提电脑手写怎么设置|电脑手写设置方法，，电脑手写设置方法看起来此电脑应该是surface等触屏的笔记本，我也遇到这现象，自己摸索找到，处理方法</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc4x.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/40.webp" alt="魅蓝note6性能参数有哪些" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc4x.html" title="魅蓝note6性能参数有哪些">魅蓝note6性能参数有哪些</a></h2>
</div>
<p class="text-muted meta">魅蓝note6性能参数有哪些，摄像头,蓝牙，魅蓝note6性能参数有哪些魅力蓝色Note6最好拍照。电池寿命更长。蓝色Note6使用高通 snapdragon 625</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc4h.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/50.webp" alt="打印机常见故障排除方法HP5000打印机为例" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc4h.html" title="打印机常见故障排除方法HP5000打印机为例">打印机常见故障排除方法HP5000打印机为例</a></h2>
</div>
<p class="text-muted meta">打印机常见故障排除方法HP5000打印机为例，，HP 50005100打印机常见问题的原因及解决方法 从纸的运动方式分析。我们将纸张从手动箱放入打</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc37.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/20.webp" alt="移动4g设置参数|移动4g接入点设置参数设置" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc37.html" title="移动4g设置参数|移动4g接入点设置参数设置">移动4g设置参数|移动4g接入点设置参数设置</a></h2>
</div>
<p class="text-muted meta">移动4g设置参数|移动4g接入点设置参数设置，，1. 移动4g接入点设置参数设置打开“设置”，找到“双卡和移动网络”。02点击"双卡和移动网络"</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc3p.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030507/l22dqplmy2439.webp" alt="手机版wps里如何给字加拼音|wps在文字上加拼音的方法wps怎么给文字加拼音搜狗问问" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc3p.html" title="手机版wps里如何给字加拼音|wps在文字上加拼音的方法wps怎么给文字加拼音搜狗问问">手机版wps里如何给字加拼音|wps在文字上加</a></h2>
</div>
<p class="text-muted meta">手机版wps里如何给字加拼音|wps在文字上加拼音的方法wps怎么给文字加拼音搜狗问问，WPS教程，1.wps在文字上加拼音的方法 wps怎么给文字加拼</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc28.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/59.webp" alt="小编辑器教你减少计算机网络流量的最简单方法" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc28.html" title="小编辑器教你减少计算机网络流量的最简单方法">小编辑器教你减少计算机网络流量的最简单方</a></h2>
</div>
<p class="text-muted meta">小编辑器教你减少计算机网络流量的最简单方法，，核心提示：教你如何减少电脑的互联网流量的最简单的方法：在浏览器的设置中，有在安全项目的自定</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc25.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/24.webp" alt="Android手机模拟器的安装方法_模拟器安装教程在计算机技能" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc25.html" title="Android手机模拟器的安装方法_模拟器安装教程在计算机技能">Android手机模拟器的安装方法_模拟器安装教</a></h2>
</div>
<p class="text-muted meta">Android手机模拟器的安装方法_模拟器安装教程在计算机技能，，核心提示：现在的Android手机，Android手机，微信应该是一个火，很多手机应用的朋友比</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc00.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/8.webp" alt="如何升级路由器的路由器升级_192.168.1.1鲜为人知的方法" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc00.html" title="如何升级路由器的路由器升级_192.168.1.1鲜为人知的方法">如何升级路由器的路由器升级_192.168.1.1鲜</a></h2>
</div>
<p class="text-muted meta">如何升级路由器的路由器升级_192.168.1.1鲜为人知的方法，，核心提示：有时候，我们要使用一些新的功能或路由器路由器路由器可以用来升级更稳定</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc0t.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/74.webp" alt="电脑装cpu风扇全过程|电脑cpu风扇安装方法" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc0t.html" title="电脑装cpu风扇全过程|电脑cpu风扇安装方法">电脑装cpu风扇全过程|电脑cpu风扇安装方法</a></h2>
</div>
<p class="text-muted meta">电脑装cpu风扇全过程|电脑cpu风扇安装方法，，1. 电脑cpu风扇安装方法笔记本电脑风扇加油步骤如下：1、拆开电脑，在风扇的保养中，首先要把电池和</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lcz9.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/42.webp" alt="电脑硬盘怎么查看参数|电脑硬盘哪里看参数" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lcz9.html" title="电脑硬盘怎么查看参数|电脑硬盘哪里看参数">电脑硬盘怎么查看参数|电脑硬盘哪里看参数</a></h2>
</div>
<p class="text-muted meta">电脑硬盘怎么查看参数|电脑硬盘哪里看参数，，1. 电脑硬盘哪里看参数硬盘的详细参数，包括：型号，出厂序列号以及生产标号，将主机拆开，然后将硬盘拿</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lcz3.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/37.webp" alt="电脑硬盘启动设置教程|电脑硬盘启动设置方法" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lcz3.html" title="电脑硬盘启动设置教程|电脑硬盘启动设置方法">电脑硬盘启动设置教程|电脑硬盘启动设置方</a></h2>
</div>
<p class="text-muted meta">电脑硬盘启动设置教程|电脑硬盘启动设置方法，，1. 电脑硬盘启动设置方法1、首先按下delete或者F2键，进入bios，选择启动顺序：光驱启动、硬盘启</p>
</article></ul>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>Copyright © 2023 易知道 ezd.cc All Rights Reserved</p>
<p><a href="https://beian.miit.gov.cn/">京ICP备19020253号-3</a></p>
</footer>
</body>
</html>