方法一:

  1. HTML
  2.  
  3. <div id="app">
  4. <button @click="getData($event,'100')">点我</button>
  5. </div>
  1. JS
  2.  
  3. methods : {
  4. getData(e,num) {
  5. console.log(num); // 输出 100
  6. }
  7. }

方法二:

  1. HTML
  2.  
  3. <div id="app">
  4. <button data-num="100" ref="dataNum" @click="getData($event)">点我</button>
  5. </div>
  6. JS
  7.  
  8. methods : {
  9. getData (e) {
  10. console.log(this.$refs.dataNum.dataset.num); // 输出 100
  11. }
  12. }

方法三:

  1. HTML
  2.  
  3. <div id="app">
  4. <button data-num="100" @click="getData($event)">点我</button>
  5. </div>
  6.  
  7. JS
  8.  
  9. methods : {
  10. getData (e) {
  11. console.log(e.target.getAttribute('data-num')); // 输出 100
  12. }
  13. }

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. 使用jetpack 4.2.2对jetson tx2进行刷机

    一.前言 加班加点几天今天终于成功刷机,记录一下成功的一些过程,以方便同样卡住的朋友参考. 延续官网教程[1]中对设备的叫法,pc机称为host,tx2称为target. 二.过程 1. host相关 ...

  2. MapReduce示例式理解

    从word count这个实例理解MapReduce. MapReduce大体上分为六个步骤:input, split, map, shuffle, reduce, output.细节描述如下: 1. ...

  3. 使用 Vagrant + VirtualBox 快速构建 CentOS 下的 Docker 环境

    Vagrant - 基础概念: Vagrant 是什么? Vagrant是一款用于在单个工作流程中构建和管理虚拟机环境的工具.凭借易于使用的工作流程和专注于自动化,Vagrant降低了开发环境设置时间 ...

  4. Struts笔记4

    Struts2-拦截器-单个拦截器 自定义拦截器 1.创建一个继承AbstractInterceptor的类 package com.gyf.web.interceptor; import com.o ...

  5. python基础 — CSV 数据处理

    什么是csv 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本) 编码: encode  ...

  6. AVR单片机教程——流水灯

    上次我们用 delay 函数与 while 循环实现了一个LED的闪烁.这一次我们把所有LED加入进来,让它们依次闪烁,形成流水灯的效果. 开发板上有4个LED,我们可以用不多的语句把循环体直接描述出 ...

  7. NodeJS的环境搭建+传统ELmentui+vue开发

    ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做 ...

  8. SSM整合所需的maven配置文件

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  9. Spring的事件监听ApplicationListener

    ApplicationListener是Spring事件机制的一部分,与抽象类ApplicationEvent类配合来完成ApplicationContext的事件机制. 如果容器中存在Applica ...

  10. Linux权限管理:setUID、setGID 和 Sticky BIT

    1.setUID.setGID 和 Sticky BIT 的功能详解 setuid 功能: 1.只有可执行的二进制文件程序才能设定 SUID 权限(前提) 2.命令执行者要对该程序有执行(x)权限(必 ...