Vue 获取dom元素中的自定义属性值(带详细解释和自己理解)

最新推荐文章于 2024-07-26 20:40:28 发布

拿鼓思谱

最新推荐文章于 2024-07-26 20:40:28 发布

阅读量2.4k

点赞数

分类专栏： vue的插件 js方法文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/weixin_49111162/article/details/110423379

版权

js方法同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue的插件

8 篇文章 1 订阅

订阅专栏

方法一:

HTML

<div id="app">
  <button  @click="getData($event,'100','666','777')">点我</button>
</div>

methods : {
   getData(e,num,lalala,eee) {
        console.log(e);     // 输出 这个点击事件下面的所有属性
        console.log(num);     // 输出 100
        console.log(lalala);     // 输出 666
        console.log(eee);     // 输出 777
        //当然,我们还可以在后面加很多参数,但是你在methods获取时,一定要注意对应的值,如果丢失一个,可能打印获取的不是你那一个,可能是前面的一个值
   }
}

方法二:

HTML

<div id="app">
  <button data-lalala="666" ref="dataNum"  @click="getData($event)">点我</button>
</div>

methods : {
   getData (e) {
       console.log(this.$refs.dataNum.dataset.lalala);     // 输出 666
        //注意几点,第一,其实我们这里没有用到getData里面带的$event;
        //第二,看到ref时,是不是感觉很熟悉,就是表单认证里面的ref,在打印时,一定要加"s",变成refs;
        //第三,就是data-lalala,在methods里面,要写成dataset.lalala
   }
}

方法三:

HTML

<div id="app">
 <button data-lalala="666" @click="getData($event)">点我</button>
</div>

methods : {
   getData (e) {
       console.log(e.target.getAttribute('data-lalala'));     // 输出 666
       //这里,我们就用到了$event,打印内容大概为,event中目标指定属性名'data-lalala'的属性值。
      //(如果不是很了解,需要百度一下"target"和"getAttribute"的意思,event里面的属性很多,我们要用的那个,就调用对象的属性就好了)
   }
}