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

方法一:

HTML

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

JS

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>

JS

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>

JS

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

如果那里写的有问题,请麻烦留言指出,谢谢!!!

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
❤如果喜欢比卡丘分享的文章，就给比卡丘点个关注吧！(๑′ᴗ‵๑)づ╭❤～
❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论(请勿发表攻击言论)

拿走,不用谢!!!送人玫瑰,手留余香