SOURCE

        new Vue({
            el:"#app",
            data:{
                tabs:["标题1","标题2","标题3"],
                cons:["内容1","内容2","内容3"],
//               为判断添加class做初始准备，0相当于index
                isActive:0,
            },
            methods:{
//               接收index
                change(index){
//                   将点击的下标赋值给isActive 
                    this.isActive = index;
                    console.log(index)
                }
            }

        })

    <div id="app">
        <button v-for="tab,index in tabs" v-bind:class="{active: isActive == index }" v-on:click="change(index)">{{tab}}</button>
        <p v-for="con,index in cons" v-bind:class="{active: isActive == index}">{{con}}</p>
    </div>
<!--v-for 循环  tab，index 两个数据 （值和下标）  -->
<!-- v-bind: 添加arr :class 添加class名 {名: isative是否等于下标，返回true或false}  如果返回true添加class名为acitve；如果返回false不添加 -->
<!-- v-on事件 click 函数传值（index） -->

        p{
            display: none;
        }
        button.active{
            background:red;
        }
        p.active{
            display: block;
        }