table切换在各个网页中经常用到，平常用jQuery比较容易实现，使用jQuery中的siblings选择其余同胞元素。

    <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();
        });

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

用vue实现方法

<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
}

代码中内容部分来自box中的数据。

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！