下面是程式碼例項。

html這裡

<a href="#">
<i class="fa fa-building-o"></i>
<span class="groups" data-url="{{URL('inext-admin/summary/groups/'.$group['id'].'/systems')}}">{{$group['name']}}</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i> 
<span class="label label-primary pull-right">{{count($group['systems'])}}</span>
</span>
</a>

JS這裡。

});

說白了，就是html5提供了一個data-*這個屬性，你可以寫任意一個data-one,data-two,都可以，

然後js的dom就會讀到你寫的這個屬性，拿到裡面的值。

當然你可以自己通過JS自己追加屬性。也可以改變裡面的值。

<div id="test" data-age="24">       Click Here    </div>

var test = document.getElementById('test');

        test.dataset.my = 'Byron';

這種元素都會有dataset屬性。這樣就追加了一個data-my的屬性（id=test），

取得：

var test = document.getElementById("test"

//getAttribute()取值屬性
console.log(test.getAttribute("data-age"));
//setAttribute()賦值屬性
test.setAttribute("data-age","48");

//data-字首屬性可以在JS中通過dataset取值，更加方便

console.log(test.dataset.age);
//賦值
tree.dataset.age = "30";
tree.dataset.age--;

tree.dataset.age++;