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 ...
随机推荐
- driud 异常
异常如下: 十二月 25, 2017 11:37:14 下午 org.apache.tomcat.util.digester.SetPropertiesRule begin警告: [SetProper ...
- Pytest权威教程07-Monkeypatching,对模块和环境进行Mock
目录 Monkeypatching,对模块和环境进行Mock 简单示例如: 猴子补丁方法 Monkeypatching 返回对象: 构建mock类 全局补丁示例如:阻止"requests&q ...
- 7、vueJs基础知识07
UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁.大方 官网文档https://www.bootcss.com/ ...
- docker nginx angular 刷新错误,404错误
主要是router问题,两个解决方案 一个是修改angular项目的router选项,一个是修改Nginx的route 选项 一般情况下项目部署了,不愿意修改angular项目的router选项,所以 ...
- 解释一下 Flux
Flux 是一种强制单向数据流的架构模式.它控制派生数据,并使用具有所有数据权限的中心 store 实现多个组件之间的通信.整个应用中的数据更新必须只能在此处进行. Flux 为应用提供稳定性并减少运 ...
- package.json 字段说明
以vue的package.json为例: { // 名称 "name": "vue", // 版本 "version": "2.6 ...
- Sqlmap全参数详解
sqlmap全参数详解 sqlmap是在sql注入中非常常用的一款工具,由于其开源性,适合从个人到企业,从学习到实战,各领域各阶段的应用,我们还可以将它改造成我们自己独有的渗透利器.这款工具中,大大小 ...
- orchestrator的安装和配置
介绍 在MySQL高可用架构中,目前使用比较多的是Percona的PXC,Galera以及MySQL 5.7之后的MGR等,其他的还有的MHA,今天介绍另一个比较好用的MySQL高可用复制管理工具:O ...
- System.Net.FtpWebRequest.cs
ylbtech-System.Net.FtpWebRequest.cs 实现文件传输协议(FTP)客户端. 1.返回顶部 1. #region 程序集 System, Version=4.0.0.0, ...
- ISO/IEC 9899:2011 条款6.8.5——迭代语句
6.8.5 迭代语句 语法 1.iteration-statement: while ( expression ) statement do statement w ...