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>

這樣就能夠直接在內容部分隨意編輯了，不知道各位大神還有沒有更好的方法歡迎你們指教
本文旨在本身概括學習，寫的很差請你們見諒