Vue开发Tabs组件

<template>
	<div class="container">
		<div class="left">
			<ul>
				<li v-for="(item,index) in datalist" @click="clickItem(index)" :key="index">{{item.text}}</li>
			</ul>
		</div>
		<div class="right">
			<div v-for="(item,index) in datalist" v-show="index===currentIndex" :key="index">{{index}}</div>
		</div>

		
	
		
	</div>
</template>

<script>
	export default{
		props:{},
		data(){
			return{
				datalist:[
					{
						id:1,
						text:'北京'
					},
					{
						id:2,
						text:'南京'
					},
					{
						id:3,
						text:'西安'
					}
				],
				currentIndex:0,
				pupShowL:false,
				
			}
		},
		components:{},
		methods:{
			clickItem(index){
				this.currentIndex = index
			},
			
		},
		mounted(){},
		created(){},
		watch:{}
	}
</script>

<style scoped lang="scss">
	.container{
		width: 500px;
		height: 600px;
		border: 1px solid red;
		.left{
			float: left;
			width: 30%;
			height: 100%;
			ul{
				li{
					width: 100%;
					height: 30px;
					transition: all 0.2s ease;
					line-height: 30px;
					cursor: pointer;
					&:hover{
						background-color: #EEEEEE;
					}
				}
			}
		}
		.right{
			position: relative;
			float:right;
			width: 70%;
			height: 100%;
				
			div{
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}
		.pup{
			
			margin-left: 40px;
			width: 60px;
			
			background-color: red;
			height: 50px;
			transition: height 0.1s ease;
		}
	}
	
	
</style>