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 来获取样 ...
随机推荐
- 027 Android 可扩展的listview:ExpandableListView的使用案例
1.ExpandableListView简介 ExpandableListView是一种用于垂直滚动展示两级列表的视图,和 ListView 的不同之处就是它可以展示两级列表,分组可以单独展开显示子选 ...
- Visual Studio 设置为 UTF-8 保存格式
1. 步骤 Visual Studio 提供高级保存选项功能,它能指定特定代码文件的编码规范和行尾所使用的换行符. 在 VS 中,该命令没有默认显示在「文件」菜单中.用户需要手工设置,才能显示该命令. ...
- javascript Ajax 学习
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! AJAX是asynchronousjavascript and XML的简写,就是异步的javascrip ...
- 基于re模块的计算器
最终计算器需求: 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - ...
- 1-JavaScript变量
对于JS的变量这个环节,其实主要要了解一下JS数据类型的存储方法 JS有两种不同的数据类型:基本类型(原始类型),引用类型(对象类型). 1.栈 (stack) 和 堆 (heap) 栈 (stack ...
- JVM锁优化以及区别
偏向所锁,轻量级锁都是乐观锁,重量级锁是悲观锁. 首先简单说下先偏向锁.轻量级锁.重量级锁三者各自的应用场景: 偏向锁:只有一个线程进入临界区: 轻量级锁:多个线程交替进入临界区: 重量级锁:多个线程 ...
- Fortify漏洞之Path Manipulation(路径篡改)
继续对Fortify的漏洞进行总结,本篇主要针对 Path Manipulation(路径篡改)的漏洞进行总结,如下: 1.Path Manipulation(路径篡改) 1.1.产生原因: 当满足以 ...
- 编写一个stm32 svc关中断函数
做到了让stm32触发svc中断并传递进去参数然后切换到handler模式并修改特殊寄存器的值,从而达到关中断,但是其实这个程序直接就是特权级,故不进入handler模式也可以修改特殊寄存器..... ...
- 解决 google 浏览器记住密码导致输入框样式改变(变成淡黄色背景)
直接在页面上使用css代码: input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit ...
- nginx 默认配置语法和日志的format
nginx 默认配置 查看有nginx哪些默认配置文件,打开/etc/nginx/nginx.conf文件,查看尾行部分 会默认将/etc/nginx/conf.d/文件下其他以.conf结尾的配置文 ...