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

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

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

[code]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的指向就可以实现对应模板的显示

[code]<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实现鼠标悬浮后切换对应的选项卡

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

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

以下为项目的css代码

[code]#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;
}

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