使用Vue.js实现简易选项卡切换功能

最近在自学Vue.js，于是随手做了一个选项卡切换的功能，前端萌新第一次写博客，所以代码中或者文章表述有什么错误的，希望各位前辈不吝赐教，感激不尽。

首先用Vue.component创建了三个标签名为tab1,tab2,tab3的模板（若模板内容较多，可以用id来设置，这里就不多加解释）

Vue.component('tab1',{
	template:'<div>这是选项卡一 一 一里面的内容</div>'
}),
Vue.component('tab2',{
	template:'<div>这是选项卡二 二 二里面的内容</div>'
}),
Vue.component('tab3',{
	template:'<div>这是选项卡三 三 三里面的内容</div>'
})

平时我们可以在HTML中直接引用<tab1></tab1>来展示模板里的内容，但是vue中提供了一个<component ：is="value"></component>占位符，其中 "：is" 属性可以用来指定要展示的组件的名称，而我们只需要改变在实例化模板时定义value的指向就可以实现对应模板的显示

<div id="app">
    <div @mouseover="tabName='tab1'" >选项卡一</div>
	<div @mouseover="tabName='tab2'">选项卡二</div>
	<div @mouseover="tabName='tab3'">选项卡三</div>
	<component :is='tabName' class="tabName"></component>
</div>

@mouseover实现鼠标悬浮后切换对应的选项卡

var vm = new Vue({
	el: '#app',
	data:{
	    tabName:'tab1',
	},
})

设置tabName初始值为'tab1'，页面初始显示选项卡一的内容

以下为项目的css代码

#app{
			position: relative;
			width: 400px;
			height: 300px;
			margin: 0 auto;
		}
		#app div{
			float: left;
			background-color: #e1e1e1;
			width:130px ;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
		#app div:nth-child(2){
			margin: 0 5px;
		}
		#app div:not(.tabName):hover{
			background-color: #c3c3c3;
		}
		#app div:nth-child(4){	
			position: absolute;
			top: 50px;
			margin: 0 auto;
			width: 400px;
			height: 300px;
			background-color: #c3c3c3;
		}

以下是代码实现效果（挺丑的，但是实现功能就好了）