Vue.js，jquery 实现tabe切换

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>

这样就能够直接在内容部分随意编辑了，不知道各位大神还有没有更好的方法欢迎你们指教
本文旨在本身概括学习，写的很差请你们见谅