<p @click = “clickfun($event)”>点击</p>
methods: {
clickfun(e) {
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
#获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
#获得点击元素的第一个子元素
e.currentTarget.firstElementChild
# 获得点击元素的下一个元素
e.currentTarget.nextElementSibling
# 获得点击元素中id为string的元素
e.currentTarget.getElementById("string")
# 获得点击元素的string属性
e.currentTarget.getAttributeNode('string')
# 获得点击元素的父级元素
e.currentTarget.parentElement
# 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML }
},

vue之$event获取当前元素的节点的更多相关文章

  1. vue click事件获取当前元素属性

    Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...

  2. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  3. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  4. vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

  5. vue.js click点击事件获取当前元素对象

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...

  6. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  7. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  8. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  9. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

随机推荐

  1. Prometheus基础(二)

    1.什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB).Prometheus使用Go语言开发,是Google BorgMon监控 ...

  2. windows上hexo: command not found

    使用hexo写博客已经有好几个月了,今天突然出现hexo: command not found,应该与我白天的时候调一下环境变量等有关.在对应的path添加环境变量,即可解决该问题.我的环境变量路径为 ...

  3. Oracle 11g 数据库 expdp/impdp 全量导入导出

    从一个用户导出导入到另一个用户 问题 环境:oracle 11g; redhat 6 usera是具有DBA权限,密码为usera 全量导出usera用户下的所有内容,并导入到新建的userb用户 解 ...

  4. 肠道微生物研究进展 | Microbiology | Human Gut Microbiome | human gut microbiota

    之前我有过一篇16s基本概念和数据分析的文章.16S 基础知识.分析工具和分析流程详解 可以分成两部分,生物层面和技术层面. 生物层面: 1. 肠道微生物里面包含了哪些微生物?显然包含了所有层面的微生 ...

  5. 快速创建 Vue 项目

    转载:https://www.jianshu.com/p/c7df292915e7 为了便于 Vue 项目的管理, Vue 团队官方开发了 vue-cli 工具. 本文将带您使用 vue-cli 快速 ...

  6. PEP 476 -- Enabling certificate verification by default for stdlib http clients

    SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate ch ...

  7. C3线性化

    https://zh.wikipedia.org/wiki/C3线性化 在计算机科学中,C3算法主要用于确定多重继承时,子类应该继承哪一个父类的方法,即方法解析顺序(Method Resolution ...

  8. 关于Kubernetes Master高可用的一些策略

    关于Kubernetes Master高可用的一些策略 Kubernetes高可用也许是完成了初步的技术评估,打算将生产环境迁移进Kubernetes集群之前普遍面临的问题. 为了减少因为服务器当机引 ...

  9. (转)设置了RemoveIPC=yes 的RHEL7.2 会crash掉Oracle asm 实例和Oracle database实例

    设置了RemoveIPC=yes 的RHEL7.2  会crash掉Oracle asm 实例和Oracle database实例,该问题也会在使用Shared Memory Segment (SHM ...

  10. PHPStorm提示:phpdoc comment doesn't contain all necessary @throw tag(s)

    选择Settings => Editor => Inspection, 选择PHP => PHPDoc => Missing @throws tag(s) ,把后面的勾勾去掉就 ...