效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
<style>
ul li {
margin: 0;
padding: 0;
list-style: none;
}
#app {
width: 600px;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
}
.tab-tilte{
width: 90%;
}
.tab-tilte li{
float: left;
width: 25%;
padding: 10px 0;
text-align: center;
background-color:#f4f4f4;
cursor: pointer;
}
/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active{
background-color: #09f;
color: #fff;
}
.tab-content div{
float: left;
width: 99%;
line-height: 100px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app" >
<ul class="tab-tilte">
<li v-for="(t,index) in tabTitle" @click="tab(index)" :class="t.check?'active':''">{
{t.name}}</li>
</ul>
<div class="tab-content">
<div v-for="(m,index) in tabMain" v-show="cur==index">{
{m}}</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
tabTitle: [{name:'标题一',check:true}, {name:'标题二',check:false}, {name:'标题三',check:false}, {name:'标题四',check:false}],
tabMain: ['这是内容一', '这是内容二', '这是内容三', '这是内容四'],
cur: 0 //默认选中第一个tab
},
methods:{
tab:function(index){
this.cur=index;//根据传入的index设置到cur，cur是控制显示哪个content
var tabTitle= this.tabTitle;
for(var i=0;i<tabTitle.length;i++){
var tab = tabTitle[i];
if(index===i){//当前点击的选中
tab.check=true;
}else{//其他的不选中
tab.check=false;
}
}
}
}
})
</script>
</html>