Vue动态组件实现tab切换

最新推荐文章于 2024-03-20 19:35:43 发布

浅浅呐

最新推荐文章于 2024-03-20 19:35:43 发布

阅读量494

点赞数 1

分类专栏：前端文章标签： vue 注册组件 tab

本文链接：https://blog.youkuaiyun.com/qq_41445106/article/details/101779727

版权

前端专栏收录该内容

80 篇文章

订阅专栏

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>    
    <div id="app">
        <button v-for='(btn, index) in btnGroup' 
            :key="index" :class="{active:btn.disabled}"  
            @click='change(index)'>{{btn.name}}
        </button>
        <component :is='currentCom'></component>
    </div>       
    <script>
        Vue.component('Childs1',{
            template:'<div>11</div>'
        })
        Vue.component('Childs2',{
            template:'<div>22</div>'
        })
        Vue.component('Childs3',{
            template:'<div>33</div>'
        })
        Vue.component('Childs4',{
            template:'<div>44</div>'
        })
        new Vue({
            el:'#app',
            data: {
                btnGroup: [
                    {name: 'Childs1', disabled: true},
                    {name: 'Childs2', disabled: false},
                    {name: 'Childs3', disabled: false},
                    {name: 'Childs4', disabled: false},
                ],
                currentCom:'Childs1'
            },
            methods:  {
                change(index){
                    let pre = Number(this.currentCom[this.currentCom.length -1]);
                    this.btnGroup[pre -1].disabled = false;
                    this.btnGroup[index].disabled = true;
                    this.currentCom = 'Childs' + (index + 1);
                }
            }
        })
    </script>
            
</body>
</html>