<div data-val>是HTML標(biāo)簽中的一個屬性，用于在HTML元素中存儲數(shù)據(jù)值。它提供了一種簡單的方式來將數(shù)據(jù)與HTML元素關(guān)聯(lián)起來，以便在后續(xù)的操作中使用。
下面是幾個使用<div data-val>的代碼案例，用于更詳細(xì)地解釋和說明它的用法。
第一個案例是一個簡單的登錄表單。在這個案例中，我們使用<div data-val>屬性來存儲用戶輸入的用戶名和密碼。

用戶名：

<code><input id="username" type="text" /></code>

密碼：

<code><input id="password" type="password" /></code>

登錄按鈕：

<code><button onclick="login()">登錄</button></code>

在JavaScript代碼中，我們可以通過<div data-val>來獲取用戶輸入的用戶名和密碼，然后進(jìn)行相應(yīng)的后續(xù)操作。

<code>function login() {
var username = document.querySelector('#username').value;
var password = document.querySelector('#password').value;
<br>
  // 進(jìn)行登錄驗證
}</code>

第二個案例是一個簡單的待辦事項列表。在這個案例中，我們使用<div data-val>屬性來存儲每個待辦事項的標(biāo)題和完成狀態(tài)。

待辦事項：

<code><ul id="todo-list">
<li data-val='{"title": "購物", "completed": false}'>購物</li>
<li data-val='{"title": "洗衣服", "completed": true}'>洗衣服</li>
<li data-val='{"title": "看電影", "completed": false}'>看電影</li>
</ul></code>

在JavaScript代碼中，我們可以通過<div data-val>來獲取每個待辦事項的標(biāo)題和完成狀態(tài)，然后進(jìn)行相應(yīng)的處理。

<code>var todoList = document.querySelector('#todo-list');
var todoItems = todoList.querySelectorAll('li');
<br>
todoItems.forEach(function(item) {
var dataVal = JSON.parse(item.getAttribute('data-val'));
var title = dataVal.title;
var completed = dataVal.completed;
<br>
  // 處理每個待辦事項
});</code>

<div data-val>屬性為我們提供了一種簡便的方法來將數(shù)據(jù)與HTML元素關(guān)聯(lián)起來，在后續(xù)的操作中使用。無論是簡單的表單還是復(fù)雜的數(shù)據(jù)列表，使用<div data-val>都可以更好地組織和管理數(shù)據(jù)。同時，我們可以通過JavaScript代碼來獲取并處理這些數(shù)據(jù)，實現(xiàn)更多功能和交互效果。