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:"主机"} 			] 		} 	})

文章来源: vue.js制作tab选项卡