vue 中 tab 切换 效果及代码

html 部分

<div id="app">
	<ul class="btnList">
		<li :class="{active:num===i}" v-for="(item,i) in btnList" :key="item.title" v-html="item.title" @click="tab(i)"></li>
	</ul>
	<div class="btnContent">
		<p>{{btnList[num].content}}</p>
	</div>
</div>

css部分

html,body,#app
	{
		height: 100%;
		width:100%;
	}
	*{
		margin: 0;
		padding:0;
		box-sizing:border-box;
	}
	.btnList{
		width:100%;
		display: flex;
		flex-direction:row;
		margin-top: 20px;
		padding-left:40px;
		list-style: none;
		height:70px;
		border-bottom:1px solid #dedede;
	}
	.btnList li{
		height:71px;
		padding:0 35px;
		font-size: 24px;
		background-color: #fff;
		text-align: center;
		line-height: 71px;
		border:1px solid #dedede;
		margin-right: 10px;
		border-bottom:1px solid #fff;
	}
	.btnContent{
		padding:40px;
		font-size: 24px;
	}
	.btnList li.active{
		border: 1px solid #4282fc;
		border-bottom:1px solid #fff;
		color: #4282fc;
	}

js 部分

	var app = new Vue({
		el:"#app",
		data(){
			return{
				num:0,
				btnList:[
				{"title":"全部","content":"全部内容部分"},
				{"title":"在线","content":"在线内容部分"},
				{"title":"离线","content":"离线内容部分"}
				]
			}
		},
		methods:{
			tab(index){
				this.num = index;
			}
		}
	})