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 来获取样 ...
随机推荐
- 024 Android 自定义样式对话框(AlertDialog)
1.AlertDialog介绍 AlertDialog并不需要到布局文件中创建,而是在代码中通过构造器(AlertDialog.Builder)来构造标题.图标和按钮等内容的. 常规使用步骤(具体参见 ...
- django初识1
django django初识 django的本质就是基于socket通信 一.127.0.0.1 本地回环地址 后面:8001是端口号 /ppt是根目录下的ppt子网页 二./当前网站的客户端(根目 ...
- 20191113-Linux+robotframework+jenkins配置自动化测试2
第八步:配置jenkins 安装JDK a) yum install java-1.8.0-openjdk java-1.8.0-openjdk-devel 配置环境变量 a) vi ...
- Linux or Mac 重启网络
Mac sudo ifconfig en0 down sudo ifconfig en0 up Linux /etc/init.d/networking restart
- ASP.NET Core依赖注入多个服务实现类
依赖注入在 ASP.NET Core 中起中很重要的作用,也是一种高大上的编程思想,它的总体原则就是:俺要啥,你就给俺送啥过来. 服务类型的实例转由容器自动管理,无需我们在代码中显式处理. 因此,有了 ...
- 论坛中的问题:47(等待类型为MSSEARCH的进程被KILL之后,一直处于回滚状态)
原文:论坛中的问题:47(等待类型为MSSEARCH的进程被KILL之后,一直处于回滚状态) 求助:等待类型为MSSEARCH的进程被KILL之后,一直处于回滚状态 http://bbs.csdn.n ...
- SQL Server邮件标识点
<br>---换行  :---空格 <H1></H1>---标题 --定义表格格式 N'<table border="1" ...
- Ubuntu下添加定时任务执行php文件
//添加自动下载定时任务1. vim /etc/crontab2. 添加 #每5分钟执行一次*/5 * * * * root /usr/bin/php /home/wwwroot/123.php3. ...
- 大专生自学web前端到找到工作的经验
先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...
- nginx 之高级模块
secure_link_module 模块 作用: 制定并允许检查请求的链接的真实性以及保护资源免遭未经授权的访问 限制链接生效周期 配置语法 Syntax:secure_link expressio ...