方法一:

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元素中的自定义属性值的更多相关文章

  1. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  2. vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

  3. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  4. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  5. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  6. Vue获取dom元素

     <li  @click='获取li标签'    :ref="center-li" id="center-li"      > =====我是li标 ...

  7. Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

  8. Vue 获取DOM元素ref

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

随机推荐

  1. 死锁造成oom的排错

    1.死锁的查看步骤 jps -l jstack xxxx(xxxx为java进程的进程号) ------ 2:查看java进程的参数: jps -l jinfo -flag printGcDetial ...

  2. 自己实现CountDownLatch

    自己实现的CountDownLatch ,只是模拟他的功能而已.jdk中的实现采用的是AQS public class MyCountDownLatch { private final int tot ...

  3. [HTTPS] - 请求API失败(Could not create SSL/TLS secure channel)之解决

    背景 在单元测试中请求 HTTPS API 失败. 异常 Result StackTrace:  at System.Web.Services.Protocols.WebClientProtocol. ...

  4. JWT知识整理

    JSON Web Token:(https://jwt.io/) JSON Web Token(JWT)是一个开放式标准(RFC 7519),它定义了一种紧凑(Compact)且自包含(Self-co ...

  5. 题解 Luogu P1099 【树网的核】

    这题是真的水啊... ------------ 昨天模拟赛考了这题,很多人都是O($n^3$)水过,但我认为,要做就做的足够好(其实是我根本没想到O($n^3$)的做法),然后就开始想O(n)的解法. ...

  6. EXCEL 快捷键大全

    1.ctrl+tab :快速切换已打开的excel/ppt/word同样适用 2.shift+右上角的× :关闭所有excel/ppt/word 3.ctrl+d:快速复制非文本目标,对于文本是删除 ...

  7. PAT(B) 1072 开学寄语(Java)统计

    题目链接:1072 开学寄语 (20 point(s)) 题目描述 下图是上海某校的新学期开学寄语:天将降大任于斯人也,必先删其微博,卸其 QQ,封其电脑,夺其手机,收其 ipad,断其 wifi,使 ...

  8. 接口中的方法都自动的被设置为public,接口中的域被自动设置为public static final

    接口中的方法都自动的被设置为public,接口中的域被自动设置为public static final

  9. 将double转化成string,并保持N位小数

    double dumpSize = (1024000000.1415926535897932384 * 1.0) / 1024 / 1024; string tempStr = to_string(d ...

  10. Linux修改主机名方法

    [root@lyx ~]# vim /etc/hosts   vim代表修改,进入hosts文件进行添加192.168.10.128 hadoop128 [root@lyx ~]# hostname ...