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 来获取样 ...
随机推荐
- MapReduce示例式理解
从word count这个实例理解MapReduce. MapReduce大体上分为六个步骤:input, split, map, shuffle, reduce, output.细节描述如下: 1. ...
- [转帖]hadoop学习笔记:hadoop文件系统浅析
hadoop学习笔记:hadoop文件系统浅析 https://www.cnblogs.com/sharpxiajun/archive/2013/06/15/3137765.html 1.什么是分布式 ...
- 定时任务-SQL Server代理 作业
创建一个sqlserver作业 sqlserver的作业的功能更加偏向于数据库,处理数据,迁移等.当然也可以调用接口(存储过程调用接口 https://www.cnblogs.com/cynchan ...
- C 语言函数手册:涵盖字符测试、字符串操作、内存管理、时间换算、数学计算、文件操作、进程管理、文件权限控制、信号处理、接口处理、环境变量、终端控制
1. 字符测试函数 函数 说明 isascii() 判断字符是否为ASCII码字符 2. 字符串操作 函数 说明 gcvt() 将浮点型数转换为字符串(四舍五入) index() 查找字符串并返回首次 ...
- laravel框架视图中常用的逻辑结构forlese,foreach,ifelse等
if 和else @if($name === 1) 这个数字是1 @else 这个数字非1 @endif switch @switch($name) @case(1) 变量name == 1 @bre ...
- Python中关于Lambda函数的使用总结
lambda表达式是一种匿名函数,对应python中的自定义函数def,是定义某个函数时比较高级的一种写法.作为python初学者,本文整理了lambda的一些基本用法和特点. lambda和def的 ...
- AX 2009中现有量画面修改
前端时间开发一个东西,需要在现有量画面增加一个字段 但是发现这个display方法写在任何数据源下面都不行,数据取的不对. 因为InventSum这个表只有所有维度都出来时才会有对应关联的invent ...
- 《一头扎进》系列之Python+Selenium框架设计篇5 - 价值好几K的框架,哎呦!这个框架还真有点料啊!!!
1. 简介 其实,到前面这一篇文章,简单的Python+Selenium自动化测试框架就已经算实现了.接下来的主要是介绍,unittest管理脚本,如何如何加载执行脚本,再就是采用第三方插件,实现输出 ...
- Bipartite Checking CodeForces - 813F (线段树按时间分治)
大意: 动态添边, 询问是否是二分图. 算是个线段树按时间分治入门题, 并查集维护每个点到根的奇偶性即可. #include <iostream> #include <sstream ...
- hdu 2822 ~!!!!!!坑死我
首先 在此哀悼... 为我逝去的时间哀悼... 每一步都确定再去写下一步吧...日狗 不过还是有点收获的.. 对优先队列的使用 有了进一步的理解 先上代码 #include<iostrea ...