除了JavaScript和CSS，data-*属性还能与其他技术结合使用吗？-CSDN博客

本文链接：https://blog.csdn.net/qq_38822390/article/details/146046845

1. HTML 模板引擎

许多HTML模板引擎允许在模板中插入 data-* 属性，以便在服务器渲染的页面中存储特定的动态数据。

示例：使用 EJS

在EJS模板中，可以将数据嵌入到元素的 data-* 属性中。

<ul>
  <% users.forEach(user => { %>
    <li data-user-id="<%= user.id %>" data-user-role="<%= user.role %>">
      <%= user.name %>
    </li>
  <% }); %>
</ul>

在这个示例中，用户的ID和角色被动态插入到每个列表项的 data-* 属性中。

2. 前端框架

许多现代前端框架（如 Vue.js、React 和 Angular）可以直接使用 data-* 属性来传递数据或作为事件处理的依据。

示例：Angular

在Angular中，data-* 属性可以用于指令和组件之间传递数据。

<button data-user-id="{
    { user.id }}" (click)="handleClick($event)">
  点击我
</button>

在这个示例中，用户ID被绑定到按钮的 data-user-id 属性中，并在点击时通过事件处理程序访问。

3. AJAX 和 Fetch API

在使用AJAX或Fetch API进行异步请求时，可以使用 data-* 属性来存储请求的元信息，例如请求状态、ID或其他参数。这些信息可以在发送请求时使用。