HTMLElement.dataset

MDN定义

注意，HTMLElement.dataset (en-US) 属性是一个DOMStringMap，并且自定义数据属性 data-test-value 可以通过 HTMLElement.dataset.testValue ( 或者是 HTMLElement.dataset[“testValue”] ) 来访问，任何破折号(U+002D) 都会被下个字母的大写替代(驼峰拼写)。

1. 利用data-status='1'可以实现状态对应的样式
2. 实现隐藏功能
3. 实现换肤功能

Vue实现不同页面即使同名的css样式命名也不会相互影响

Jsbin详细案例

<style type="text/css">
    article {
        display: block;
        background: #ccc;
    }
    article::before {
        content: attr(data-parent);
    }
    article[data-columns='3']{
        width: 400px;
    }
    article[data-columns='4']{
        width: 600px;
    }
</style>
<article id="electriccars"
         data-columns="4" 
         data-indexnumber="12314" 
         data-parent="cars">
</article>
<script>
    var article = document.querySelector('#electriccars'),
        data = article.dataset;
    data.parent = 'vehicles';
</script>