VUE tab切换

最新推荐文章于 2024-07-17 11:58:23 发布

Le_OOP

最新推荐文章于 2024-07-17 11:58:23 发布

阅读量623

点赞数

本文链接：https://blog.csdn.net/Le_OOP/article/details/81745647

版权

<!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>

Le_OOP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE tab切换

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .tab-button {
复制链接

扫一扫