vue之$event获取当前元素的节点
<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获取当前元素的节点的更多相关文章
- vue click事件获取当前元素属性
Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...
- Vue自定义指令获取DOM元素
我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- vue获取dom元素注意问题
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
- vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
随机推荐
- (12)打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
- CF1187F Expected Square Beauty(期望)
题目 CF1187F Expected Square Beauty 做法 \(B(x)=\sum\limits_{i=1}^n I_i(x),I_i(x)=\begin{cases}1&x_i ...
- [Shell]利用JS文件反弹Shell
0x01 模拟环境 攻击: kali ip: 192.168.248.132 测试: windows 7 x64 ip: 192.168.248.136 0x02 工具地址 https://githu ...
- 数据结构Java版之遍历二叉树(六)
二叉树是我们在程序中用的最多的一种树(个人观点).最简单的一个二叉树是由一个根节点,两个子节点(一左一右成左右孩子节点)组成.二叉树是数组和链表的结合,即包含了数组的快速查找优点,又包含了链表的快速添 ...
- 第一步,怎么打开react的大门?
前言 其实我的react的实战经验很少,大概是17年-18年写了一个react全家桶的后台管理系统.猜测这个项目应该还一直在使用 在我手里的vue项目就比较多了,技术栈一直是vue全家桶.最近也在深入 ...
- Spring boot Security 登陆安全配置
实现的效果 访问url时,如果未登录时跳转到Login界面,要求用户登陆,如果登陆过返回请求的数据. 效果图 访问数据时,未登录返回login界面 登陆操作 登陆成功进入登出界面 登陆成功后再次访问数 ...
- 深入理解JVM虚拟机12:JVM性能管理神器VisualVM介绍与实战
一.VisualVM是什么? VisualVM是一款免费的JAVA虚拟机图形化监控分析工具. 1. 拥有图形化的监控界面. 2. 提供本地.远程的JVM监控分析功能. 3. 是一款免费的 ...
- HTMLPage测试js通过ajax调用
HTMLPage测试js通过ajax调用接口 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3. ...
- CMU Database Systems - Indexes
这章主要描述索引,即通过什么样的数据结构可以更加快速的查询到数据 介绍Hash Tables,B+tree,SkipList 以及索引的并行访问 Hash Tables hash tables可以实现 ...
- java MVEL2/Spring EL表达式、直接调用、反射性能实测
import java.io.Serializable; import java.lang.reflect.Field; import java.util.HashMap; import java.u ...