html标签中 自定义属性data-text的妙用

如下图代码：

通过动态的设置data的值，可以实现类似于tab切换的效果。

注：此处我们是在div标签中设置的data-year 这个值，当然，也可以在其他html标签中设置。

data-'自定义的名字'，data-后面的名字是可以自定义的。如：data-text、data-name、等等

效果如下：

获取标中data的值的方法：

e.currentTarget.dataset.year或e.target.dataset.year 

上面实现效果的代码如下：

    <div class="change-year">
       <div :class="fourCurYear == firstYear ? 'active' : ''" @click="changeFourCurYear" :data-year="firstYear">{{ firstYear }}年</div>
       <div :class="fourCurYear == secondYear ? 'active' : ''" @click="changeFourCurYear" :data-year="secondYear">{{ secondYear }}年</div>
       <div :class="fourCurYear == threeYear ? 'active' : ''" @click="changeFourCurYear" :data-year="threeYear">{{ threeYear }}年</div>
   </div>

         changeFourCurYear(e) {  // 注册的点击事件，当点击时设置fourCurYear为我们在html标签中datad定义的值，以此可以控制内容的展示和样式的切换
            console.log(e);
            console.log(e.currentTarget.dataset.year);
            console.log(e.target.dataset);
            this.fourCurYear = e.currentTarget.dataset.year 
           
        },