table切换在各个网页中经常用到，平常用jQuery比较容易实现，使用jQuery中的siblings选择其余同胞元素，为了加深记忆顺便把jQuery的代码贴一下。

    <div id="tit"><span class="select">标题1</span><span>标题2</span><span>标题3</span></div><ul id="con"><li class="show">内容111</li><li>内容222</li><li>内容333</li></ul>

  $('#tit span').click(function() {var i = $(this).index();//下标第一种写法//var i = $('tit').index(this);//下标第二种写法$(this).addClass('select').siblings().removeClass('select');$('#con li').eq(i).show().siblings().hide();});

上面的代码我是百度来的，实现方法也比较多，作为一个前端小白刚开始使用vue写感觉好难过，大家不要嫌弃我蠢

<h4 ref="all" @click="all">全部</h4>
<h4 ref="product" @click="product">商品</h4>
<h4 ref="news" @click="news">新闻</h4>

我用vue直接来操作DOM虽然可以实现，但我自己都觉得有些蠢，然后我百度了一下，果然大神就是给力，

<div id="app"><div><button v-for="(ind,key,index) in btn" v-bind:class="{active:(indexs==index)}"v-on:click="a(index)">{{ind}}</button>//这段代码通过indexs==index的值来判断active类，通过a方法来决定indexs 的值 反正以我的水平是写不出来的</div><div class="wrap"><div v-for="(w,key,index) in box" v-if="indexs == index">{{w}}</div></div>
</div>

<script type="text/javascript">var app = new Vue({el:"#app",data:{btn:{a:"按钮1",b:"按钮2",c:"按钮3"},box:{aa:"tab切换1",bb:"tab切换2",cc:"tab切换3"},indexs:0,a:function(str){this.indexs=str;}}})
</script>

.wrap div{width: 300px;height: 300px;background-color: #0cc;}
.active{background-color: red
}

上面代码来自池剑锋使用vue实现tab切换例子

他的代码中内容部分来自box中的数据，为了让内容部分更加灵活，我又想到了一个比较笨的方法

 <div class="wrap"><div  v-if="indexs == 0">fhgfdshdf</div><div  v-if="indexs == 1">sdfsdfsfsfsdfdsfffffffff</div><div  v-if="indexs == 2">dsfdfgdfgdfgdfAAAAAAAAAAAA</div></div>

这样就可以直接在内容部分随意编辑了，不知道各位大神还有没有更好的方法欢迎大家指教
本文旨在自己归纳学习，写的不好请大家见谅