Vue 获取dom元素中的自定义属性值
方法一:
HTML <div id="app">
<button @click="getData($event,'100')">点我</button>
</div>
JS methods : {
getData(e,num) {
console.log(num); // 输出 100
}
}
方法二:
HTML <div id="app">
<button data-num="100" ref="dataNum" @click="getData($event)">点我</button>
</div>
JS methods : {
getData (e) {
console.log(this.$refs.dataNum.dataset.num); // 输出 100
}
}
方法三:
HTML <div id="app">
<button data-num="100" @click="getData($event)">点我</button>
</div> JS methods : {
getData (e) {
console.log(e.target.getAttribute('data-num')); // 输出 100
}
}
Vue 获取dom元素中的自定义属性值的更多相关文章
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- vue获取dom元素注意问题
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...
- Vue获取dom元素
<li @click='获取li标签' :ref="center-li" id="center-li" > =====我是li标 ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- Vue 获取DOM元素ref
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
随机推荐
- [转帖]LINUX下使用rinetd端口转发
LINUX下使用rinetd端口转发 https://www.iteye.com/blog/lvinie-1167701 . 本来想自己写一下 发现没必要. 并且原作者提供了pan.baidu.com ...
- 在CentOS下搭建GoLang开发环境
下载安装包 [vagrant@dk ~]$ wget http://mirrors.ustc.edu.cn/golang/go1.13.linux-amd64.tar.gz 使用USTC 中科大开源镜 ...
- 玫瑰花小制作分享-JavaScript(七夕专属浪漫)
分享一个玫瑰花的制作小方法,用小小的代码给自己的她送上一个不一样的玫瑰花. 玫瑰花代码由JavaScript实现,JavaScript 作为一种脚本语言, 被发明用于在 HTML 网页上使用,可以给H ...
- python之numpy和pandas
一.numpy矩阵的拼接合并 列拼接:np.column_stack() >>> import numpy as np >>> a = np.arange(9).r ...
- 基于MFC的网页ActiveX控件开发全程实录2(js向ActiveX控件传递参数)
原文转自 https://blog.csdn.net/qianbin3200896/article/details/81452822 1.ActiveX控件部分(JS到ActiveX控件)继续上一篇博 ...
- 【LeetCode】从排序数组中删除重复项
给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...
- jQuery遍历(2)
上期我们讲了遍历的祖先和后代的问题,现在我们讲讲遍历同胞 同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. jQuery siblings() 方法 siblin ...
- 【日语】日语单词N3_N4_N5
日语单词N3_N4_N5 单 词 讲 解 あ行单词 ああ:0[副]那样.那种 例句:ああ言うことはしないほうがいい.那样的事情最好不做. 電車の窓からごみを棄てているああ言うことはしないほうがいい. ...
- WCF Restful Service
对 Web Services.WCF 和 Restful 的扫盲可参见:https://www.cnblogs.com/scy251147/p/3382436.html 关于之前对 WCF 的学习,可 ...
- 运维开发笔记整理-template的使用
运维开发笔记整理-Django的template的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在上一篇博客中我们学习了HttpResponse 和JsonResponse方 ...