vue tab切换小例

版权声明：转载请注明出处。 https://blog.csdn.net/zeroyulong/article/details/83897624

<template>
    <div>
        <h2>tab切换测试</h2>
		<ul class="tab-title">
			<li :class="{active:activeIndex == index }" v-for="(item,index) in titleList" :key="index" @click="tabChange(index)">{{item}}</li>			
		</ul>
	
		<ul class="tab-content">
			<li v-if="activeIndex == 0">show1</li>
			<li v-if="activeIndex == 1">show2</li>
			<li v-if="activeIndex == 2">show3</li>
			<li v-if="activeIndex == 3">show4</li>
		</ul>
	</div>
</template>
<script>
	import pdf from 'vue-pdf'
	export default {
		components: {
			pdf
		},
		data() {
			return {
				titleList:['头1','头2','头3','头4'],
				activeIndex:0,
			}
		},
		methods:{			
			tabChange(index){
				console.log(index);
				this.activeIndex = index;
			}
		}
	}
</script>
<style scoped="scoped" lang="less">
	.tab-title{
		width: 100%;
		display: flex;
		justify-content: space-around;
		li{
			border: 1px solid coral;
			font-size: 20px;
			padding: 20px 30px;
			flex: 1;
		}
		.active{
			background: greenyellow;
		}
	}
	.tab-content{
		width: 100%;
		height: 300px;
		font-size: 24px;
		color: blueviolet;
		border: 1px solid blue;
	}
</style>