vue.js制作tab选项卡

刚学习了vue.js，就用vue.js做了个选项卡练练手，简单做个记录。

<ul>
		<li v-for = "(postrs,key) in postr" v-on:click = "num = key">{{ postrs.name }}</li>
	</ul>
	<div v-for = "(poar,key) in 4" v-show = "num === key" >
		{{ key }}
	</div>

ul{list-style: none;margin: 0;padding: 0;text-align: center;height: 30px;display: table;margin: 0 auto;}
		ul li{width: 100px;float: left;text-align: center;background: #f0f0f0;height: 30px;line-height: 30px;cursor: pointer;}
		ul li:hover{background: #a9a9a9;}

new Vue({
		el:"#app",
		data:{
			num:0,
			postr:[
				{name:"键盘"},
				{name:"鼠标"},
				{name:"显示器"},
				{name:"主机"}
			]
		}
	})