1.首先我们需要了解的是vue这个框架，它是一个渐进式的框架！
2.vue2.0版本是2016年发布的！
3.还有一大堆的指令这里我就不一一的给大家描述了，如果大家感兴趣的话，可以去vue的官方网站看看，Vue官网地址。
4.现在我们直接进入正题，首先给大家看看这个tab切换栏的案例。
?
1.说到tab栏切换，相信大家都知道是怎么一回事吧，就是切换点击上面的选项卡，下面的图片也跟着切换。
2.tab栏的切换可以用原生JS去实现，也可以通过jQuery实现。但是今天我要使用vue去实现它，我觉得无论是使用原生JS还是jquery，都会去操作DOM元素。而操作DOM不利于JavaScript性能的优化。?
5.我们项目中需要使用vue，因此我们需要先引入vue.js。这个大家可以去官网上下载！现在给大家看看我引入vue的模板。
6.现在正式开始，书写tab栏切换的代码！给大家看看我写的源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<style>
#app {
width: 1250px;
text-align: center;
}
div img {
width: 600px;
height: 400px;
}
.tab {
width: 600px;
height: 50px;
margin: 0 auto;
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
float: left;
width: 198px;
height: 50px;
text-align: center;
font-size: 30px;
border: 1px solid;
/* background-color: aqua; */
}
.active{
background-color: plum;
}
img {
display: none;
}
.current {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<ul>
<li @click ='change(index)' :key='item.id' :class ='index == currentIndex ? "active":""' v-for='(item,index) in list'>{{item.title}}</li>
</ul>
</div>
<div :key='item.id' v-for='(item,index) in list'>
<img :src='item.path' :class ='index == currentIndex ? "current":""'>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
currentIndex: 0,
list: [{
id: 1,
title: 'one',
path: 'img/1.jpg'
}, {
id: 2,
title: 'two',
path: 'img/2.jpg'
}, {
id: 3,
title: 'three',
path: 'img/3.jpg'
}]
},
methods:{
change(index){
this.currentIndex = index
}
}
})
</script>
</body>
</html>?大家可以看到其实我写的结构代码非常的少，主要是使用了大量的vue的指令去操作data里面的数据，将数据渲染到页面上面。大家如果看不懂指令的操作，可以去官网上看看相关指令的作用。
我觉得这个tab栏切换的关键是定义了一个currentIndex，通过和循环遍历中的index比较，从而去给对应的元素添加相应类名。这样就可以给对应的选项卡添加背景色，以及显示对应的图片。