HTML5的自定义属性data-*

最近发现了html5中的一个自定义属性能更好的实现类似于tab切换的功能，不说太多，直接贴图

就点击按钮切换不同的内容或者页面，在日常工作中经常会遇到这样的需求。

<div class="app">
			<h3 v-show="tab==1">111</h3>
			<h3 v-show="tab==2">222</h3>
			<h3 v-show="tab==3">333</h3>
			
			<button @click="tabchange" data-name='1'>1</button>
			<button @click="tabchange" data-name='2'>2</button>
			<button @click="tabchange" data-name='3'>3</button>
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el:'.app',
				data:{
					tab:1
				},
				methods:{
					tabchange(e){
						console.log(e)
						this.tab = e.target.dataset.name
					}
				}
			})
		</script>

直接在按钮标签中添加data-属性（在这里我写的是data-name,可随意），首先我们打印出当前点击元素，查找被点击元素data-name

可以找到e.target.dataset.name对应的即是我们赋予每个按钮的唯一标识，在这里通过绑定切换内容就可以轻松实现了。
现在，我们来深入了解一下HTML5的自定义属性data-
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串