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 来获取样 ...
随机推荐
- Eclipse控制台不限日志行数
在使用Eclipse时,如果控制台输出的内容比较多,控制台之前的内容就会消失,导致前面的控制台打印信息无法查看. 设置Eclipse的控制台属性 设置方法: 打开Eclipse的菜单栏:Window ...
- 【坑】关于springMvc对JSON日期绑定,得到的日期后面多个时间的问题
文章目录 前言 Mysql的Date() 后记 前言 当我们翻过 解决springMvc对JSON日期绑定 眼前这座大山以后,发现并没有 IG 的荣光在等着我们,反而有个大坑在等着我们.... 比如博 ...
- 长乐培训Day2
T1 足球联赛 题目 [题目描述] 巴蜀中学新一季的足球联赛开幕了.足球联赛有n只球队参赛,每赛季,每只球队要与其他球队各赛两场,主客各一场,赢一场得3分,输一场不得分,平局两只队伍各得一分. 英勇无 ...
- PAT(B) 1078 字符串压缩与解压(Java)
题目链接:1078 字符串压缩与解压 (20 point(s)) 题目描述 文本压缩有很多种方法,这里我们只考虑最简单的一种:把由相同字符组成的一个连续的片段用这个字符和片段中含有这个字符的个数来表示 ...
- closed channel
func Test_chanel(t *testing.T) { c := make(chan int, 1) go func() { time.Sleep(time.Second * 3) clos ...
- ubuntu修改密码
ubuntu修改密码 本文链接:https://blog.csdn.net/heybob/article/details/9095727 修改root密码: 1,$sudo su,输入密码进入root ...
- 【转载】使用Jedis操作redis
Redis是一个开源的Key-Value数据缓存,和Memcached类似. Redis多种类型的value,包括string(字符串).list(链表).set(集合).zset(sorted se ...
- ASP.NET MVC 5 伪静态之支持*.html路由
参考了例子 到自己实践还是有不少坑要踩,这种文章,你说它好还是不好呢 注意这里的版本是ASP.NET MVC 5 首页的URL为 http://localhost:58321/index.html ...
- 爬虫相关--requests库
requests的理想:HTTP for Humans 一.八个方法 相比较urllib模块,requests模块要简单很多,但是需要单独安装: 在windows系统下只需要在命令行输入命令 pip ...
- iOS - 处理通话或录音状态中界面错乱的重布局
iphone设备在通话或录音状态中,状态栏下移了20个像素,这时controller的view的frame的高度就减少了20个像素,所以我们需要根据view的frame去布局子view.但是是,当状态 ...