【VUEJS】tab bar key switching case

	<div class="vertical-tab" id="app">
	<!-- Nav tabs -->
	<ul class="nav nav-tabs1">
	<li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li>
	</ul>
	<!-- Tab panes -->
	<div class="tab-content tabs">
	<div class="tab-pane fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'>
	<h3>{{item.title}}</h3>
	<p>{{item.content}}</p>
	</div>
	</div>
	<!-- Nav tabs -->
	<ul class="nav nav-tabs2">
	<li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#" rel="external nofollow" rel="external nofollow" > {{item.title}} </a></li>
	</ul>
	</div>

view raw index.html hosted with ❤ by GitHub

	new Vue({
	el: "#app",
	data: {
	currentIndex: 0, // current index of the tab
	list: [{
	id: 1,
	title:'Section 1',
	content:'content1'
	}, {
	id: 2,
	title:'Section 2',
	content:'content2'
	}, {
	id: 3,
	title:'Section 3',
	content:'content3'
	}, {
	id: 4,
	title:'Section 4',
	content:'content4'
	}, {
	id: 5,
	title:'Section 5',
	content:'content5'
	}, {
	id: 6,
	title:'Section 6',
	content:'content6'
	}]
	},
	methods: {
	change(index, flag) {
	if (flag) {
	console.log(index)
	this.currentIndex = index;
	} else {
	this.currentIndex = index;
	}
	}
	}
	})

view raw script.js hosted with ❤ by GitHub

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

view raw scripts hosted with ❤ by GitHub

simple tab bar switching case

A Pen by Edward Lance Lorilla on CodePen.

License.

view raw simple-tab-bar-switching-case.markdown hosted with ❤ by GitHub

	* {
	margin: 0;
	padding: 0;
	}
	.vertical-tab {
	width: 920px;
	margin: 100px auto;
	}
	.vertical-tab .nav {
	list-style: none;
	width: 200px;
	}
	.vertical-tab .nav-tabs1 {
	border-right: 3px solid #e7e7e7;
	}
	.vertical-tab .nav-tabs2 {
	border-left: 3px solid #e7e7e7;
	}
	.vertical-tab .nav a {
	display: block;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 10px 20px;
	margin: 0 0 1px 0;
	text-decoration: none;
	}
	.vertical-tab .tab-content {
	color: #555;
	background-color: #fff;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 23px;
	padding: 10px 15px 10px 25px;
	display: table-cell;
	position: relative;
	}
	.vertical-tab .nav-tabs1 {
	float: left;
	}
	.vertical-tab .tabs {
	width: 500px;
	box-sizing: border-box;
	float: left;
	}
	.vertical-tab .tab-content h3 {
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 5px 0;
	}
	.vertical-tab .nav-tabs2 {
	float: right;
	}
	.tab-content {
	position: relative;
	}
	.tab-content .tab-pane {
	position: absolute;
	top: 10px;
	left: 20px;
	}
	.nav li.active a {
	color: #198df8;
	background: #fff;
	border: none;
	}
	.fade {
	opacity: 0;
	transition: all .3s linear;
	}
	.fade.active {
	opacity: 1;
	}

view raw style.css hosted with ❤ by GitHub