tab点击切换页面内容

这里面tabs是用了view的组件，不过不影响什么，我这里用了双层点击切换，外面一层是用的组件库 

<Tabs size="small">
    <Tab-pane label="语 言"> 
        <div class="title">
            <span @click="tab=0" :class="{tab_ active :tab==0}" > java</ span>
            <span @click="tab=1" :class="{tab_ active : tab==1}" > cobol</span

        </div>
    </Tab-pane>

    <Tabs pane label="类 型"> 
        <div class="title">
            <span @click="tab=10" :class="{tab_ active :tab==10}" > java</ span>
            <span @click="tab=11" :class="{tab_ active : tab==11}" > cobol</span

        </div>
    </Tab-pane>
</Tabs>

<div class="Content">
    <div class="Content_btn">
        <ul v-if="tab==0">
            <li>
                ......
            </li>
        </ul>
        <ul v-if="tab==1">
            <li>
                //这里用iframe标签是想把HTML文件映射到页面展示部分
                <iframe src="./url.html"></iframe>
            </li>
        </ul>
    。。。
    </div>
</div>

<script>
    export default {
        data() {
            return {
                tab:0 ,//默认 选中第一个tab
            };
        }
    }
</ script> 

 

 这里设置点击有样式，比如点击Java的时候下面页面展示内容，Java会有样式存在，好分辨出点击的是什么对应展示的内容

<style lang="less" scoped>
    .tab_active {
        background:#01babc;
    }
</style>