VUE tab切换

最新推荐文章于 2022-08-08 09:45:00 发布

原创最新推荐文章于 2022-08-08 09:45:00 发布 · 704 阅读

CC 4.0 BY-SA版权

本文介绍如何使用Vue.js实现动态组件加载和Tab切换功能，通过实例代码展示了不同页面间的切换效果，包括第一页、第二页和第三页的内容展示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tab-button {
            padding: 6px 10px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f0f0f0;
            margin-bottom: -1px;
            margin-right: -1px;
        }

        .tab-button:hover {
            background: #e0e0e0;
        }

        .tab-button.active {
            background: skyblue;
        }

        .tab {
            border: 1px solid #ccc;
            padding: 10px;
        }

    </style>
</head>
<body>
<div id="dynamic-component-demo" class="demo">
    <button
            v-for="tab in tabs"
            :class="['tab-button', { active: currentTab === tab.des}]"
            @click="currentTab = tab.des"
    >{{ tab.msg }}
    </button>

    <component
            :is="currentTabComponent"
            class="tab"
    ></component>
</div>


<script src="vue.js"></script>
<script>
    Vue.component('tab-home', {
        template: '<div>第一页   <h1>dfsdfsdfsd</h1> ' +
        '</div>'
    })
    Vue.component('tab-posts', {
        template: '<div>第二页</div>'
    })
    Vue.component('tab-archive', {
        template: '<div>第三页</div>'
    })

    new Vue({
        el: '#dynamic-component-demo',
        data: {
            currentTab: 'home',
            tabs: [
                {"des": "home", "msg": "第一页"},
                {"des": "posts", "msg": "第二页"},
                {"des": "archive", "msg": "第三页"},

            ]
        },
        computed: {
            currentTabComponent: function () {
                return 'tab-' + this.currentTab.toLowerCase()
            }
        }
    })

</script>
</body>
</html>