vue选项卡

//功能：点击导航 切换显示内容

//html
<div id="app">
			<ul>
				<li v-for="(item,index) in list" @click="change(index)" v-bind:class="{current:num==index}">{{item}}</li>
			</ul>
			<section>
				<div v-for="(val,index) in con"  @click="change(index)" v-show="num==index">{{val}}</div>
			</section>
		</div>

//js
		<script src="vue.js"></script>
		<script >
			var app=new Vue({
				el:"#app",
				data:{
					num:0,
					list:["我的","热门","购物","游戏"],
					con:["娱乐内容","热门内容","购物内容","游戏内容"]
				},
				methods:{
					change:function(a){
						this.num=a
					}
				}
			})
		</script>

//css
			*{
				margin: 0;
				padding: 0;
			}
			ul>li{
				list-style: none;
				width: 200px;
				line-height: 30px;
				text-align: center;
				float: left;
				border: 1px solid red;
			}
			ul{
				overflow: hidden;
				margin-bottom:20px
			}
			section>div{
				width: 800px;
				height: 200px;
				border: 1px solid black;
			}
			.current{
				background-color: orange;
			}