通过Vue实现简单的Tab切换

实现思路是点击上方的标题，下方的内容随之发生改变，上方和下方用的是两个块，是兄弟节点，所以需要点击tab标题和下方内容一一对应，基予两个模块若下标相同是一个内容实现的。
Tab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构

 <div id="App"><ul class="tab-tilte"><li>标题一</li><li>标题二</li><li>标题三</li><li>标题四</li></ul><div class="tab-content"><div>内容一</div><div>内容二</div><div>内容三</div><div>内容四</div></div></div>

Tab切换第二步写上对应的css样式

   <style>*{margin:0;padding:0；}#App {width: 600px;height: 400px;margin: 0 auto;border: 1px solid #ccc;}ul li {margin: 0;padding: 0;list-style: none;}.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: 25%;line-height: 100px;text-align: center;}</style>

Tab切换第三步引入vue实现

<body><div id="App"><ul class="tab-tilte"><li @click="cur=0" :class="{active:cur==0}">标题一</li><li @click="cur=1" :class="{active:cur==1}">标题二</li><li @click="cur=2" :class="{active:cur==2}">标题三</li><li @click="cur=3" :class="{active:cur==3}">标题四</li></ul><div class="tab-content"><div v-show="cur==0">内容一</div><div v-show="cur==1">内容二</div><div v-show="cur==2">内容三</div><div v-show="cur==3">内容四</div></div></div><script src="./js/vue.js" type="text/javascript"></script><script type="text/javascript">var app = new Vue({el: "#app",data: {cur:0 //默认选中第一个tab}});    </script>
</body>

效果图：
在这里插入图片描述

Tab切换效果改进与优化

（1）以上代码看起来似乎很简单容易懂，而且效果也能实现，但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值，因此我们有必要改进一下代码的写法。
（2）利用vue提供的v-for指令遍历得到索引和值如下所示：

<div id="App"><ul class="tab-tit"><li v-for="(title,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{title}}</li></ul><div class="tab-content"><div v-for="(m,index) in tabMain" v-show="cur==index">{{m}}</div></div>
</div><script type="text/javascript">window.onload = function(){var app = new Vue({el:'#app',data:{tabTitle: ['标题一', '标题二', '标题三', '标题四'],tabMain: ['内容一', '内容二', '内容三', '内容四'],cur: 0 //默认选中第一个tab}})}</script>

最终效果图如下：

在这里插入图片描述