原理：
给当前选中元素动态的添加样式，没有选中的元素删除样式，同时title区域的li元素和content区域的li元素联动的进行切换
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>基于Vue的选项卡实例</title>
<style type="text/css">
html,body{margin: 0;padding: 0;}
#app{margin: 0 auto;text-align: center;width: 424px;}
#app .title ul,li{margin: 0;padding: 0;list-style-type: none;}
#app .title ul li{display: inline-block;width: 100px;height: 40px;border: 2px solid #222222;line-height: 40px;text-align: center;border: 1px solid #080808;margin:0 2px}
#app .title ul li.active{background: #985F0D;}
#app .content ul,li{margin: 0;padding: 0;list-style-type: none;}
#app .content ul li{display: none;border: 1px solid #1B6D85;width: 422px;}
#app .content ul li.active{display: block;}
#app .content ul li img{width: 100%;}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="title">
<ul>
<li :class="currentIndex==index?'active':''" v-for="(item,index) in list" @mouseover="handle(index)">{
{item.title}}</li>
</ul>
</div>
<div class="content">
<ul>
<li :class="currentIndex==index?'active':''" v-for="(item,index) in list"><img :src="item.imgsrc"/></li>
</ul>
</div>
<div class="control">
<button @click="change">切换</button>
<button @click="play">播放</button>
<button @click="stop">停止</button>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
currentIndex:0,
list:[
{id:1,title:'《西游记》',writer:'吴承恩',imgsrc:'img/1.jpg'},
{id:2,title:'《水浒传》',writer:'施耐庵',imgsrc:'img/4.jpg'},
{id:3,title:'《三国演义》',writer:'罗贯中',imgsrc:'img/3.jpg'},
{id:4,title:'《红楼梦》',writer:'曹雪芹',imgsrc:'img/2.jpg'}
],
timer:''
},
methods:{
handle:function(index){
this.currentIndex=index
},
change:function(){
this.currentIndex++
this.currentIndex=this.currentIndex%4
console.log(this.currentIndex)
},
play:function(){
this.timer=setInterval(this.change,1111)
},
stop:function(){
clearInterval(this.timer)
}
}
})
</script>
</body>
</html>