tab

Posted gxywb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tab相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <style>
            .tab{
                width: 500px;
                background: #fff;
                margin: 0 auto;
                background: rgb(227,232,238);
                padding: 16px;
            }
            .tab-header{
                overflow: hidden;
            }
            .tab-item{
                width: 100px;
                height: 30px;
                line-height: 30px;
                background: #ccc;
                border: 1px solid #dddee1;
                background: #f8f8f9;
                text-align: center;
                margin-right: 5px;
                border-radius: 2px;
                float: left;
            }
            .tab-active{
                border-color: transparent;
                height: 32px;
                margin-bottom: 5px;
                background: #fff;
                transform: translateZ(0);
                color: #e6451e;
            }
            .tab-content{
                height: 100px;
                line-height: 10px;
                background: #fff;
                overflow: hidden;
            }
            .tab-content div{
                width: 100%;
                height: 100%;
                text-align: center;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="tab" id="app">
            <div class="tab-header">
                <div 
                    v-for="item ,index in tabData" 
                    class="tab-item"
                    @click="tab(index)"
                    v-bind:class="{‘tab-active‘:index===currentIndex}"
                    >
                {{item.title}}
                </div>
                
            </div>
            <div class="tab-content">
                <div 
                    v-for="item,index in tabData" 
                    v-bind:style="{display: index===currentIndex?‘block‘:‘none‘}"
                >
                    <p v-for="option in item.list">{{option.subTitle}}</p>
                </div>
                
            </div>
        </div>
    </body>
    <script>
        let tabData=[
            {
                title:‘标签一123‘,
                list:[
                    {
                        subTitle:‘css课程‘
                    },
                    {
                        subTitle:‘css课程‘
                    },
                    {
                        subTitle:‘css课程‘
                    }
                ]
            },
            {
                title:‘标签二456‘,
                list:[
                    {
                        subTitle:‘js课程‘
                    }
                ]
            },
            {
                title:‘标签三789‘,
                list:[
                    {
                        subTitle:‘Vue课程‘
                    }
                ]
            }
        ]
        new Vue({
            el:"#app",
            data:{
                tabData:tabData,
                currentIndex:1
            },
            methods:{
                tab(index){
                    this.currentIndex=index;
                }
            }
        })
    </script>
</html>

技术图片

 

以上是关于tab的主要内容，如果未能解决你的问题，请参考以下文章

在 Visual Studio 中创建构造函数的代码片段或快捷方式

选项卡执行android中下一个片段中存在的代码

vc++2010设置和c#一样的代码段,vs2010 两下tab设置

片段存储和重用：使用TabView的多个子片段

如何在片段内制作 Swip ActionBar-Tabs

Tablayout+view 寻呼机未在位置 0 显示片段