vue的tab选项卡切换

实现tab选项卡切换

<li
                        v-for="(item,index) in tabs"
                        :key="index"
                        :class="{active:index == num}"
                        @click="tab(index)"
                    >
                        <a :class="{active:index == currentIndex}">{{item}}</a>
                    </li>


  <div
                    class="time"
                    v-for="(itemCon,index) in tabContents"
                    :key="index"
                    v-show="index == num"
                >
                    {{itemCon}}
     </div>

export default {
    data() {
        return {
            tabs: ["标题1", "标题2","标题3"],
            tabContents: ["内容1", "内容2","内容3"],
            num: 0,
        };
    },
    methods: {
        tab(index) {
            this.num = index;
        }
    }
}

.active{
                color: #FB5B49;
}