tab点击切换，简单实例

<template>
    <div class=" padding-50 tabchange" style="color:yellow;">
        <ul class="title-ul clearfix">
            <li class="title-lists active">tab1</li>
            <li class="title-lists ">tab2</li>
            <li class="title-lists ">tab3</li>
        </ul>
        <ul class="content-ul clearfix">
            <li class="content-lists active">内容1</li>
            <li class="content-lists">内容2</li>
            <li class="content-lists">内容3</li>
        </ul>

    </div>
</template>

<script>
export default {
    methods: {
        tabchanges(){
            var parent = document.querySelector('.tabchange');
            var tabtitle=parent.querySelectorAll('.title-lists')
            var tablists=parent.querySelectorAll('.content-lists')
            console.log(tabtitle,tablists)
            for(var i = 0;i < tabtitle.length;i++){
                tabtitle[i].index = i
                tabtitle[i].onclick = function(){
                    console.log(tablists)
                    for(var j = 0;j < tablists.length; j++){
                        tabtitle[j].classList.remove('active'); // 循环去掉active,只有一个被添加active,一个被选中
                        tablists[j].classList.remove('active'); // 循环去掉active,只有一个被添加active,一个被选中
                    }
                    this.classList.add('active');
                    tablists[this.index].classList.add('active');//循环添加ul类名
                }
            }
        }
    },
    computed: {},
    mounted () {
        this.tabchanges()
    }
}
</script>

<style>
    .title-ul , .content-ul {
        width:50%;
    }
    .title-ul li{
        text-align: center;
        padding:10px 0;
        border:1px solid #ccc;
        width: 33.3333%;
    }
    .title-ul li.active{
        background: #ccc;
    }
    .content-ul li{
        width:100%;
        padding:10px 0;
        height:300px;
        border:1px solid #ccc;
        display: none;
    }
    .content-ul li.active{
        display: block;
    }
</style>