點選切換頁面內容

這裏面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>