<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. centos7--zabbix3.4微信报警

    1.申请企业微信 1.1 注册企业微信的地址 https://qy.weixin.qq.com/ 1.2 按照提示进行填写 1.3 完善个人信息: 1.4 创建应用 根据提示创建应用: 1.5 筛出重 ...

  2. leaflet地图框架

    leaflet 中文API LeafLet js 官网:http://leafletjs.com/index.html LeafLet js 官网demo: http://leafletjs.com/ ...

  3. elasticsearch_dsl.exceptions.ValidationException: You cannot write to a wildcard index.

    elasticsearch_dsl.exceptions.ValidationException: You cannot write to a wildcard index. 这里是因为版本不匹配的问 ...

  4. vsnprintf和snprintf(vsnprintf就是为了支持va_list,实现对于sprint功能封装而做的)

    vsnprintf和snprintf是C语言printf家族函数的成员,相关函数列表如下: #include <stdio.h> int printf(const char *format ...

  5. layui 提交验证以及field作用

    设置值时只需data.field.name(input中name属性)=1;即可赋值data.field.index_desc = layedit.getContent(index_desc); $. ...

  6. mysql 日期总结

    select to_days(now()) #737733 select date_format(now(),'%Y-%m-%d') #2019-11-05 select CURRENT_DATE() ...

  7. nginx中的超时配置

    nginx.conf配置文件中timeout超时时间设置 client_header_timeout 语法 client_header_timeout time默认值 60s上下文 http serv ...

  8. System.Runtime.Serialization.cs

    ylbtech-System.Runtime.Serialization.cs 允许对象控制其自己的序列化和反序列化过程. 1.返回顶部 1. #region 程序集 mscorlib, Versio ...

  9. Angular中使用ECharts图表

    1.安装: npm install echarts --save 2.在 TypeScript 文件中导入echarts import * as echarts from 'echarts'; 3.根 ...

  10. jsoup爬取某网站安全数据

    jsoup爬取某网站安全数据 package com.vfsd.net; import java.io.IOException; import java.sql.SQLException; impor ...