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 ...
随机推荐
- 获取句柄的类型以及对应的ID序号
遍历所有进程下的所有句柄,以及对应句柄类型. 一丶简介 在有的时候.我们会需要对应句柄名字.以及句柄类型的名称. 以及它所对应的的ID. 因为每个系统不一样.所以每次都是不一样的. 有的时候我们就需要 ...
- Pytest权威教程10-捕获警告信息
目录 捕获警告信息 @pytest.mark.filterwarnings 禁用警告摘要 完全禁用警告捕获 弃用警告和待命记录警告 确保代码触发弃用警告 用警告函数断言警告 录制警告 自定义失败消息 ...
- App弱网测试与常用模拟工具
iOS平台,通过自带的开发者选项 >Network Link Conditioner, 即可简单的模拟各种速度的网络情况: 通过抓包工具,设置延迟,进行模拟不同的网络情况,比如常用的fiddle ...
- Spring IOC是什么
IOC 什么是IOC IOC: Inversion of Control(控制反转) 控制反转:将对象的创建权反转给(交给)Spring. 传统开发模式 业务和实现类过于紧密,底层业务要修改源代码 通 ...
- Perl关于分椰子的趣味问题
话说某天一艘海盗船被天下砸下来的一头牛给击中了,5个倒霉的家伙只好逃难到一个孤岛,发现岛上孤零零的,幸好有有棵椰子树,还有一只猴子! 大家把椰子全部采摘下来放在一起,但是天已经很晚了,所以就睡觉先晚上 ...
- useState 的介绍和多状态声明(二)
useState的介绍 useState是react自带的一个hook函数,它的作用是用来声明状态变量. 那我们从三个方面来看useState的用法,分别是声明.读取.使用(修改).这三个方面掌握了, ...
- 第2课第1节_Java面向对象编程_类的引入_P【学习笔记】
摘要:韦东山android视频学习笔记 1. 面向对象编程的引入,我们先写一个简单的程序输出张三,李四的名字.代码如下,假如,现在我们要在名字前面添加籍贯广东,那样岂不是每个printf语句都得修改添 ...
- gogs 实现webhook钩子(php接口形式)
1.概要流程 2.准备工作 gogs服务器 linux网站服务器(宝塔) 本地客户端 3.编写钩子访问的接口 在public下新建githook.php文件,代码如下: <?php $cmd = ...
- Git 回滚 Master
RenGuoQiang@PC-RENGUOQIANG MINGW64 /d/zgg/zgg-crm (master) $ git reset --hard 194e2cc8eec88743cc8978 ...
- Blockchain & BPM
http://www.infoq.com/cn/news/2018/07/blockchain-BPM?utm_source=notification_email&utm_campaign=n ...