vue实现tab切换

最新推荐文章于 2022-06-09 12:11:34 发布

hst_gogogo

最新推荐文章于 2022-06-09 12:11:34 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签：前端 HTML vue tab

本文链接：https://blog.csdn.net/hst_gogogo/article/details/80202758

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                width:100%;
                background-color: yellow;
                margin-bottom: 20px !important;
            }
            li{
                list-style: none;
                display: inline-block;                
                background-color: yellowgreen;
                cursor: pointer;
                margin-right: 20px;
                        
            }
            li a{
                padding: 10px 30px;
                display: inline-block;
            }
            .bg-red{
                background-color: red;
            }
            .bg-lime{
                background-color: lime;
            }
            .bg-pink{
                background-color: pink;
            }
            .bg-green{
                background-color: green;
            }
            .scWrap{
                width: 100%;
                
                position: relative;
                margin-top: 50px;
            }
            .sc{
                width: 100%;
                height: 300px;
                position: absolute;
            }
            .active{
                background-color: blue;
                color: white;
            }
            .dp{
                display: block;
            }
            .non{
                display: none;
            }
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="app" v-cloak>
            <ul>
                <li v-for="(item,index) in list0">
                    <a @click="changeBox(index)" :class="{active:currentN==index}">{{item.ct}}</a>                    
                </li>

            </ul>
            <!--[msg,m]-->
            <section id="scWrap">
                <div v-for="(item,index) in list"  v-show="index==currentN" :class="[item.bg,sc]">{{item.content}}</div>                
            </section>
        </div>
        
        
        
        
        
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'.app',
                data:{
                    currentN:0,
                    sc:'sc',
                    
                    list0:[
                        {
                            ct:'btn11'
                        },
                        {
                            ct:'btn22'
                        },
                        {
                            ct:'btn33'
                        },
                        {
                            ct:'btn44'
                        }
                    ],
                    list:[
                        {
                            bg:'bg-red',
                            content:'box01'
                        },
                        {
                            bg:'bg-lime',
                            content:'box02'
                        },
                        {
                            bg:'bg-pink',
                            content:'box03'
                        },
                        {
                            bg:'bg-green',
                            content:'box04'
                        }
                    ]
                },
                methods:{
                    changeBox(idx){
                        this.currentN=idx;
                    }
                }
            })
        </script>
    </body>
</html>