vue @click 获取 html5 data-属性

原创

于 2021-08-22 14:32:12 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文介绍了如何在 Vue.js 应用中利用 `@click` 事件结合 HTML5 的 `data-*` 属性来存储和获取元素数据。强调了 `data-*` 属性的灵活性，但指出在 Vue 中直接使用对象作为数据会导致 `[object Object]` 的显示。建议使用 `dataset` 属性来访问这些自定义属性，并提供了 `$event.srcElement.dataset` 的用法示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用data- * 属性可以为不同的标签存储数据。

特性：

一个元素可以有任意数量的 data 属性。
data-* = “” 在vue中使用时，不可以存对象类型属性否则会直接输出[object object]，如果一定要使用对象，将对象序列化
data-id 获取数据： $ event.srcElement.dataset.id

  <div class="test">
    <!--  event对象只在事件发生的过程中才有效 -->
    <h2 @click="g

最低0.47元/天解锁文章

200万优质内容无限畅学