Vue实现简单tab栏切换

最新推荐文章于 2025-06-13 11:04:32 发布

原创最新推荐文章于 2025-06-13 11:04:32 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .tab{
        width: 1200px;
        height: 600px;
        /* border:1px solid #ccc; */
    }
    ul,li{
        list-style: none;
    }

.tab .nav {
    float: left;
}
.tab .content {
    float: left;
    border-left:2px solid #ccc;
    border-right:2px solid #ccc;
    width:400px;
    height:400px;
}
.nav {
    height:200px;
    /* border-right:2px solid #ccc; */
    width:200px;
}
.nav li {
    line-height: 40px;
}
.content li{
    width:300px;
    height: 100px;
    display: none;
}
.nav .active {
    color:blue;
    font-size:28px;
}
.content .current {
    display: block;
    font-size: 30px;
    color:red;
}
    </style>
</head>
<body>
    <div class="tab" id='app'>
        <ul class="nav">
            <li v-if='index<3' v-on:click='tab(index)'  :class='index==currentindex ? "active":""'  v-for='(items,index) in navleft'>{{items.name}}</li>
        </ul>
        <ul class="content">
            <li :class='index==currentindex ? "current":""' v-for='(items,index) in navleft'>{{items.content}}</li>
        </ul>
        <ul class="nav">
            <li v-if='index>=3' v-on:click='tab(index)'  :class='index==currentindex ? "active":""'  v-for='(items,index) in navleft'>{{items.name}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var vm = new Vue({
        el:'#app',
        data:{
            currentindex : 0,
            navleft:[
            {
                id:1,
                name:'section1',
                content:'section1'
            },
            {
                id:2,
                name:'section2',
                content:'section2'
            },
            {
                id:3,
                name:'section3',
                content:'section3'
            },
            {
                id:4,
                name:'section4',
                content:'section4'
            },
            {
                id:5,
                name:'section5',
                content:'section5'
            },
            {
                id:6,
                name:'section6',
                content:'section6'
            },]
        },
        methods: {
            tab(index){
                this.currentindex= index;
            }
        },
    })
    </script>
</body>
</html>