方法一:

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. pytorch1.0实现GAN

    import torch import torch.nn as nn import numpy as np import matplotlib.pyplot as plt # 超参数设置 # Hype ...

  2. 多生产者多消费者(第一种方式),基于synchronized,wait,notifyAll

    生产者消费者模式描述的是协调与协作关系.比如一个人正在准备食物(生产者),而另一个人正在吃(消费者),他们使用一个共用 的桌子用于放置盘子和取走盘子,生产者准备食物,如果桌子上已经满了就等待,消费者( ...

  3. C++Primer 5th Chap10 Generic Algorithms(未完)

    大多数算法定义在头文件algorithm中,在头文件numeric中定义了数值泛型算法. 以find算法为例:在容器的两个迭代器指定的范围内遍历,查找特定值. auto result= cout< ...

  4. hadoop 伪分布启动-fs格式化

    1.独立模式(standalone|local) nothing! 本地文件系统. 不需要启用单独进程. 2.pesudo(伪分布模式) 等同于完全分布式,只有一个节点. SSH: //(Socket ...

  5. DEFAULT CURRENT_TIMESTAMP

    alter table t_user_channel_info change update_dttm update_dttm timestamp NOT NULL DEFAULT CURRENT_TI ...

  6. 匹配script标签及内容js代码的正则表达式

    <script>[\s\S]+?</script>

  7. javascript 之 扩展对象 Object.assing

    语法:Object.assign(target,...source) 说明:Object.assign方法的第一个参数是目标对象,后面的参数都是源对象 一.以对象为参数的合并 1.第一个参数都是对象, ...

  8. Java集合源码阅读之HashMap

    基于jdk1.8的HashMap源码分析. 引用于:http://blog.stormma.me/2017/05/31/Java%E9%9B%86%E5%90%88%E6%BA%90%E7%A0%81 ...

  9. git 丢弃本地代码

    git 丢弃本地代码 1.还未将变更加入到暂存区,即未执行git add 命令前可以使用git checkout 命令来撤销修改:git checkout -- rainbow.txt start.t ...

  10. 基于【 SpringBoot】一 || QQ授权流程

    一.准备工作 1.qq开放平台应用申请,获取APP ID和APP Key 2.qq开放平台配置回调地址 二.服务器端生成授权链接 1.请求地址 https://graph.qq.com/oauth2. ...